# 自定义列表左侧 title
样品列表444
取料地 | 物料名称 | 产地 | 取样时间点 | 接收机构 | 类型 | 状态 |
---|---|---|---|---|---|---|
916料场 | 卡粉-new | 京环-new | 2点半 | BBQ煤炉,总调度室,球团3期,竖炉 | 常规 | |
一号料场 | 测试物料 | 测试场地 | 12点 | 总调度室,112烧结厂 | 通用 | |
一号料场 | 喷煤 | 二期喷煤厂 | 20点,08点 | 总调度室,112烧结厂 | 常规 |
添加`title`属性
<template>
<t-antd-layout-page>
<t-antd-layout-page-item>
<t-antd-table title="样品列表444" :columns="columns" :dataSource="sourceData" />
</t-antd-layout-page-item>
</t-antd-layout-page>
</template>
<script>
export default {
name: 'titleTable',
data() {
return {
// 表头
columns: [
{
title: '取料地',
dataIndex: 'addrName'
},
{
title: '物料名称',
dataIndex: 'materialName'
},
{
title: '产地',
dataIndex: 'materialProducingArea'
},
{
title: '取样时间点',
dataIndex: 'timeNames',
customRender: (text) => {
return text.toString()
}
},
{
title: '接收机构',
dataIndex: 'usingDeptNames',
customRender: (text) => {
return text.toString()
}
},
{
title: '类型',
dataIndex: 'samplingType',
customRender: (text) => {
if (text == 0) {
return '常规'
}
if (text == 1) {
return '非常规'
}
if (text == 2) {
return '通用'
}
}
},
{
title: '状态',
dataIndex: 'status',
isCustomRender: true,
customRender: (text, record) => {
return {
children: this.$createElement('div', {}, [
this.$createElement('a-switch', {
attrs: { checked: Boolean(record.status), size: 'small' },
on: {
change: (val) => {
this.onStatusChange(val, record)
}
}
})
])
}
}
}
],
// 数据源
sourceData: [
{
id: 85,
addrName: '916料场',
materialName: '卡粉-new',
materialProducingArea: '京环-new',
samplingType: 0,
status: 1,
timeNames: ['2点半'],
usingDeptNames: ['BBQ煤炉', '总调度室', '球团3期', '竖炉']
},
{
id: 80,
addrName: '一号料场',
materialName: '测试物料',
materialProducingArea: '测试场地',
samplingType: 2,
status: 1,
timeNames: ['12点'],
usingDeptNames: ['总调度室', '112烧结厂']
},
{
id: 79,
addrName: '一号料场',
materialName: '喷煤',
materialProducingArea: '二期喷煤厂',
samplingType: 0,
status: 1,
timeNames: ['20点', '08点'],
usingDeptNames: ['总调度室', '112烧结厂']
}
]
}
},
// 方法
methods: {
// switch 改变状态
onStatusChange(value, record) {
console.log(value, record)
}
}
}
</script>
显示代码