1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ant-design-vue之中的table表格的使用

ant-design-vue之中的table表格的使用

时间:2019-03-18 22:37:11

相关推荐

ant-design-vue之中的table表格的使用

<a-table:columns="columns"//绑定表头:data-source="data"//绑定表体数据size="middle":pagination="pagination"//给表格加上分页器class="table":customRow="rowClick"//给表格的每一行都增加点击函数}"><template #name="{ text }"><a>{{ text }}</a></template>//在表体中添加if判断 通过判断来显示该列或者该单元格应该显示什么 #bodyCell是用以自定义表体数据//的插槽 column是表头数据 record是表体每一行的数据 ,两者用于定位每一个单元格,再根据判断显示该单元格内的内容--><template #bodyCell="{ column, record }">//在这里通过 column内的dataIndex属性和 record内具体你想增加判断的值,我这里来判断 状态status,两个属性用以固定一个单元格显示的内容<template v-if="column.dataIndex == 'status' && record.status == 1"><a style="color: #81c26b" class="aaa">成功</a></template><template v-else-if=" column.dataIndex == 'type' && record.type == 0"><span>新建</span></template><template v-else-if="column.dataIndex == 'type' && record.type !== 0"><span>其他</span></template>//这个判断里面添加的是操作模块,该列的内容是一些操作的东西<template v-else-if="column.dataIndex == 'operate'"><a-button size="small" type="link" danger>删除</a-button><a-button size="small" type="link" @click="logsModal(record)">日志</a-button></template></template></a-table><script setup>import {ref,reactive} from 'vue'const columns = [{title: "任务名称",dataIndex: "name",key: "name",align: "center",},{title: "任务类型",dataIndex: "type",key: "type",align: "center",// width: 80,},{title: "状态",dataIndex: "status",key: "state",align: "center",},{title: "操作",dataIndex: "operate", key: "operate",align: "center",},];const data = ref([{name:"创建任务",type:0,status:1,},{name:"创建任务",type:1,status:1,},{name:"创建任务",type:0,status:0,},])</script>

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