1.表格内容的自定义,后端接口数据返回的数据有时是状态码,例如0和1,0代表未通过,1代表通过,此时我们肯定不能在表格上显示0或1,这时就用到表格自定义
const columns2 = ref([ colums2表格头数据{title: "序号",key: "index",customRender: ({ text, record, index }) => `${index + 1}`,},{title: "登录账户",//表格头数据dataIndex: "login",//接口返回值与此表格头数据绑定key: "login",},{title: "姓名",dataIndex: "name",key: "name",ellipsis: true,},{title: "用户组",dataIndex: "orgId",key: "orgId",},{title: "状态",dataIndex: "activated",customRender: (val) => {//根据接口返回值自定义渲染数据// customRender属性是一个方法,可接收三个参数(val,row,index),分别是当前值、当前行数据和当前索引 return val.text == 1 ? "正常" : "未激活";},key: "activated",},
2.在表格内使用插槽
html代码
<a-table:dataSource="dataSource1":columns="columns1"rowKey="sign":pagination="pagination">//插槽start<template #action="{ record }">//#action与表格columns数据关联,columns数据在js<span><a @click="inHandle(record)"><InGroup :ingroup="ingroup"/></a><a-divider type="vertical" /><a>停用</a><a-divider type="vertical" /><a class="ant-dropdown-link"> 删除 </a></span></template>//插槽end</a-table>
colimns数据
const columns1 = [{title: "登录名",dataIndex: "one",key: "one",},{title: "姓名",dataIndex: "two",key: "two",},{title: "英文名",dataIndex: "there",key: "there",},{title: "操作",key: "action",slots: { customRender: "action" },//自定义插槽},];