vue3 + ant-design-vue4表格插槽的使用

ant-design-vue4表格插槽的使用

1. 定义插槽

{
    title: '操作',
    width: '20%',
    key: 'action',
    align: 'center',
    slots: {
      customRender: 'action'
    }
  }

2. 自定义表格序号

// 两种写法
// 第一种: 使用columns的属性自定义序号规则
{
  title: '编号',
  dataIndex: 'num',
  width: '10%',
  key: 'id',
  align: 'center',
  customRender: (record) => {
    return (
        (queryParam.pageNum - 1) * pagination.pageSize + parseInt(record.index) + 1
    )
  }
}
// 第二种：使用插槽
{
  title: '编号',
  dataIndex: 'num',
  width: '10%',
  key: 'id',
  align: 'center',
  slots: {
    customRender: 'num' // 插槽名
  }
}

// 插入序号的地方添加以下代码
<template #num="{text, record, index}" >
  {{ (queryParam.pagenum - 1) * pagination.pageSize + parseInt(index) + 1}}	// 序号规则
</template >

3. 使用插槽

<a-table
  row-key="id"
  :columns="columns"
  :pagination="pagination"
  :data-source="userList"
  :scroll="tableHeight"
  size="middle"
  bordered
  @change="handleTableChange"
  style="margin-top: 10px;height: 100%"
  >
  <template #bodyCell="{ column, record, index }">
    <template v-if="column.key === 'action'">
    <div class="actionSlot">
    	<a-button danger style="margin-right: 15px" @click="deleteUser(record)">删除</a-button>
    	<a-modal v-model:open="open" title="确定要删除该用户吗？" :mask="false" :confirm-loading="confirmLoading" @ok="handleOk">
    		<p>一旦删除，无法恢复</p>
  		</a-modal>
  	</div>
  	</template>
  </template>
</a-table>

• a-modal 获取不到当前行的值，只能获取最后一行的值
• 版本统一了插槽名，官方不推荐使用自定义插槽，idea 中会提示警告
• 清空 reactive 的变量