ant-design-vue之中的table表格的使用
【代码】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>
更多推荐
已为社区贡献2条内容
所有评论(0)