1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue3+ant 2.x tabls表格内容的自定义和插槽使用

vue3+ant 2.x tabls表格内容的自定义和插槽使用

时间:2023-04-05 02:28:20

相关推荐

vue3+ant 2.x tabls表格内容的自定义和插槽使用

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" },//自定义插槽},];

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。