本文解决了三个问题,先上代码再详细说:
<template>
<a-table rowKey="id" :columns="columns" :dataSource="data" :scroll="{ x: 1000}" bordered>
<span slot="type" slot-scope="type">{{type === 0 ? "是" : "否"}}</span>
<span slot="time" slot-scope="time">{{ time | filterTime(time) }}</span>
<span slot="action" slot-scope="text, record">
<template>
<a @click=handleEdit(record)>编辑</a>
<a @click=handleDel(record)>删除</a>
</template>
</span>
</a-table>
</template>
<script>
import "moment" from "moment";
export default {
data() {
return {
columns: [
{
title: "id",
dataIndex: "id",
key: "id",
width: "20%",
scopedSlots: { customRender: "id" },
},
{
title: "type",
dataIndex: "type",
key: "type",
width: "20%",
scopedSlots: { customRender: "type" },
},
{
title: "time",
dataIndex: "time",
key: "time",
width: "20%",
scopedSlots: { customRender: "time" },
},
{
title: "操作",
dataIndex: "action",
key: "action",
width: "20%",
fixed: "right",
scopedSlots: { customRender: "action" },
}
]
};
},
methods: {
handleEdit(record) {
console.log(record);
},
handleDel(record) {
console.log(record);
}
},
filters: {
filterTime(time) {
return moment(time).format("YYYY-MM-DD HH:mm:ss");
}
}
};
</script>
第一个问题:
后台返回的数据是0和1,到那时我需要显示为文字“是”和“否”,同理可以应用于显示“男”“女”,主要代码为:
<span slot="type" slot-scope="type">{{type === 0 ? "是" : "否"}}</span>
第二个问题:
之前要显示操作栏一直显示不出来,编辑和删除的按钮一直出不来,后来一点点查找才知道是data里的columns
里除了问题:应该是scopedSlots
,但是我一直写成了scopeSlots
,少了一个d
,这个问题解决得让我像一拳打在了棉花上。
第三个问题:
显示在表格里得时间需要格式化,后台返回来的是13位的。核心部分:使用filters,具体操作如下:
//模板里面用:
<span slot="time" slot-scope="time">{{ time | filterTime(time) }}</span>
//引入moment:
import "moment" from "moment";
//写filters:
filters: {
filterTime(time) {
return moment(time).format("YYYY-MM-DD HH:mm:ss");
}
}
第四个问题:
我自己的表格栏比较多,需要加横向滚动条,核心代码:
:scroll="{ x: 1000}"
这个长度可以根据自己需要调节
第五个问题:
表格比较长,最右边的操作栏需要固定,便于操作,核心代码:
在data
里的columns
里,找到action
即“操作”,添加一个属性:fixed: "right"
第六个问题:
我的数据里没有key
这个字段,
报错each record in table should have a unique ‘key‘ prop,or set ‘rowKey‘
需要有一个唯一值,设置rouKey='id'
完美