Ant Design Vue表格插槽

columns中声明插槽别名，然后在html中进行使用

text：当前这个key使用时返回的对应值,

record：当前行数据,

index：下标

方法1

//html

<a-table bordered :columns="columns" :row-key="(record) => record.id" 
:data-source="loadData" size="middle">
      <span slot="no" slot-scope="text, record, index">{{ index + 1 }}</span>

      <span slot="renderToMB" slot-scope="text">{{ (text / 1024 / 1024).toFixed(2) }}                    
      </span>

      <span slot="action" slot-scope="text, record">
        <a-tooltip title="查看">
          <a-button icon="eye" @click="viewModel(record)" type="link" />
        </a-tooltip>
        <a-divider type="vertical" />
        <a-tooltip title="下载">
          <a-button icon="download" @click="download(record)" type="link" />
        </a-tooltip>
      </span>
    </a-table>


//js---data

columns: [
        {
          title: '序号',
          width: '50px',
          // align: 'center',
          scopedSlots: { customRender: 'no' },
        },
        {
          title: '名称',
          dataIndex: 'fileName',
        },
        {
          title: '类型',
          dataIndex: 'ext',
          // align: 'center',
          width: '100px',
        },
        {
          title: '操作',
          dataIndex: 'id',
          scopedSlots: { customRender: 'action' },
          // align: 'center',
          width: '100px',
        },
      ],