<template>
  <a-table
    :columns="columns"

    :data-source="data"
    :row-key="p => p.id"
    @change="changePage"
  >


    <img style="width:100px;heigth:100px" slot="mainImage" slot-scope="aa" :src='aa' />
    <div slot="ops"  slot-scope="ll">
      <a href="javascript:;">look</a>
      <a href="javascript:;">edit</a>
      <a href="javascript:;">del</a>
    </div>

  </a-table>
</template>
<script>
  import {baseURL,uploadURL} from '@/config/baseconfig.js'

  const columns = [
    {
      title: '蛋糕',
      dataIndex: 'cakeName',
      key: 'cakeName',
      scopedSlots: { customRender: 'name' },
    },
    {
      title:'图片',
      dataIndex:'mainImage',
      key:'mainImage',
      scopedSlots: {customRender: 'mainImage'}
    },{
      title:'编辑',
      dataIndex: 'ops',
      key:'abc',
      scopedSlots: {customRender: 'ops'}
    }


  ];

  export default {
    data() {
      return {
        data: [],
        pagination: {},
        loading: false,
        columns,
      };
    },
    mounted() {
      this.changePage()
    },
    methods: {
      changePage() {
        this.$api.get(`${baseURL}/cake/all`
        ).then((resp) => {

          console.log(JSON.stringify(resp.data.data))
          let flag = resp.data.flag;
          if(flag) {
            this.data = resp.data.data;
          }
        })

      }
    },

  };
</script>

下面是完整版本的

<template>
  <a-table
    :columns="columns"
    :pagination = 'pagination'
    :data-source="data"
    :row-key="p => p.id"
    @change="changePage"
  >


    <img style="width:100px;heigth:100px" slot="mainImage" slot-scope="aa" :src='aa' />
    <div slot="ops"  slot-scope="ll">
      <a href="javascript:;">look</a>
      <a href="javascript:;">edit</a>
      <a href="javascript:;">del</a>
    </div>

  </a-table>
</template>
<script>
  import {baseURL,uploadURL} from '@/config/baseconfig.js'

  const columns = [
    {
      title: '蛋糕',
      dataIndex: 'cakeName',
      key: 'cakeName',
      scopedSlots: { customRender: 'name' },
    },
    {
      title:'图片',
      dataIndex:'mainImage',
      key:'mainImage',
      scopedSlots: {customRender: 'mainImage'}
    },{
      title:'编辑',
      dataIndex: 'ops',
      key:'abc',
      scopedSlots: {customRender: 'ops'}
    }


  ];

  export default {
    data() {
      return {
        data: [],
        current:1,
        pagination: {
          defaultPageSize:5,
          defaultCurrent:1,
          pageSize: 5, // 默认每页显示数量
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['5','10', '15'], // 每页数量选项
          showTotal: total => `Total ${total} items`, // 显示总数
          showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量时更新显示
        },
        loading: false,
        columns,
      };
    },
    mounted() {
      this.changePage(this.pagination,null,null)
    },
    methods: {
      changePage(pagination,filters, sorter) {
        this.current = pagination.current;

        this.$api.get(`${baseURL}/manager/cake?page=${this.current==null?1:this.current}&size=${pagination.pageSize}`
        ).then((resp) => {

          // console.log(JSON.stringify(resp.data))


            this.data = resp.data.rows;
            console.log(JSON.stringify(this.data))
            const Ipage = {...this.pagination}
            Ipage.total = resp.data.total;
            Ipage.pageSize = pagination.pageSize;//用户修改查询 的pagesize会更新的
            Ipage.current = this.current==null?1:this.current;
            this.pagination = Ipage;

        }).catch(e => {
          console.log("出现异常了"+e)
        })

      }
    },

  };
</script>

slot-scope,代表着插槽的范围，类似于session.Scope,record代表获取dataSource一行的值，所以想要获取到table中的值使用record.xx,xx代表着自定义dataSource中的数据。

<template>
  <div>
    <a-table
      :columns="columns"
      :pagination='pagination'
      :data-source="data"
      :row-key="p => p.id"
      @change="changePage"
    >


      <img style="width:100px;heigth:100px" slot="mainImage" slot-scope="aa" :src='aa'/>
      <div slot="ops" slot-scope="text,record">
        <a-button @click="showModal(record)" href="javascript:;">look</a-button>
        <a-button href="javascript:;">edit</a-button>
        <a-button href="javascript:;">del</a-button>

      </div>

    </a-table>
    <a-modal :visible="modalVisible"
      @ok="modalVisible = false"
             @cancel="modalVisible = false"
    ></a-modal>
  </div>

</template>
<script>
  import {baseURL, uploadURL} from '@/config/baseconfig.js'

  const columns = [
    {
      title: '蛋糕',
      dataIndex: 'cakeName',
      key: 'cakeName',
      scopedSlots: {customRender: 'name'},
    },
    {
      title: '图片',
      dataIndex: 'mainImage',
      key: 'mainImage',
      scopedSlots: {customRender: 'mainImage'}
    }, {
      title: '编辑',
      dataIndex: 'ops',
      key: 'abc',
      scopedSlots: {customRender: 'ops'}
    }


  ];

  export default {
    data() {
      return {
        data: [],
        current: 1,
        pagination: {
          defaultPageSize: 5,
          defaultCurrent: 1,
          pageSize: 5, // 默认每页显示数量
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['5', '10', '15'], // 每页数量选项
          showTotal: total => `Total ${total} items`, // 显示总数
          showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量时更新显示
        },
        loading: false,
        columns,
        modalVisible: false
      };
    },
    mounted() {
      this.changePage(this.pagination, null, null)
    },
    methods: {
      changePage(pagination, filters, sorter) {
        this.current = pagination.current;

        this.$api.get(`${baseURL}/manager/cake?page=${this.current == null ? 1 : this.current}&size=${pagination.pageSize}`
        ).then((resp) => {

          // console.log(JSON.stringify(resp.data))


          this.data = resp.data.rows;
          console.log(JSON.stringify(this.data))
          const Ipage = {...this.pagination}
          Ipage.total = resp.data.total;
          Ipage.pageSize = pagination.pageSize;//用户修改查询 的pagesize会更新的
          Ipage.current = this.current == null ? 1 : this.current;
          this.pagination = Ipage;

        }).catch(e => {
          console.log("出现异常了" + e)
        })

      },
      showModal(ll) {
        this.$success({
          title: '蛋糕产品',
          content: `${JSON.stringify(ll)}`,

        });
      }
    },

  };
</script>