表格内容渲染方法
1、使用 formatter 函数
示例代码1
<el-table-column prop="status" label="状态" align="center" :formatter="scopeIdFormat" width="auto" />
methods:{
//大类显示对应状态
scopeIdFormat(row, column, cellValue){
return row.status == '0' ? "开启" : "关闭"
}
}
示例代码2
<el-table
size="small"
border
v-loading="loading"
:data="tableData"
@selection-change="select"
>
<el-table-column
type="selection"
width="55"
>
</el-table-column>
<el-table-column
v-for="(item, index) in columns"
:key="index"
v-bind="item"
align="center"
>
<el-table-column>
</el-table>
columns: [
{
type:"index",
label: "序号“,
width: "55",
align: "center"
},
{
label: "状态",
prop: "status",
formatter: (value, column) => { //写上formatter函数
return value == '0' ? "开启" : "关闭"
},
]
2、 使用 render 函数
<el-table
size="small"
border
v-loading="loading"
:data="tableData"
@selection-change="select"
>
<el-table-column
type="selection"
width="55"
>
</el-table-column>
<el-table-column
v-for="(item, index) in columns"
:key="index"
v-bind="item"
align="center"
>
<el-table-column>
</el-table>
columns: [
{
type:"index",
label: "序号“,
width: "55",
align: "center"
},
{
key: "name",
title: "名称",
minWidth: 250,
align: "center",
render: (h, params) => {
return h("div", [
h( "a",
{
props: {
type: "primary",
size: "small",
},
on: {
click: () => {
this.clickRow(params.row); //添加点击事件
},
},
},
params.row.name // 展示内容
),
]);
},
},
{
key: "itemNum",
title: "总数",
minWidth: 150,
align: "center",
render: (h, params) => {
return h(
"div",
this.formaterNum(params.row.itemNum) // 调用数据处理的方法
);
}
},
]，
methods: {
// 点击事件
clickRow(row) {
console.log(111, row)
},
// 自定义数据处理方法
formaterAmount(data) {
if (!data) return '0.00'
// 将数据分割，保留两位小数
data= data.toFixed(2)
// 获取整数部分
const intPart = Math.trunc(data)
// 整数部分处理，增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 预定义小数部分
let floatPart = '.00'
// 将数据分割为小数部分和整数部分
const newArr = data.toString().split('.')
if (newArr.length === 2) { // 有小数部分
floatPart = newArr[1].toString() // 取得小数部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
}
3、使用 template 自定义
<el-table
size="small"
border
v-loading="loading"
:data="tableData"
>
<el-table-column
v-for="(item, index) in columns"
:key="index"
v-bind="item"
align="center"
>
<template slot-scope="scope">
<span v-if="item.prop==='status'">
<el-image
class="icon-img"
:src="'../../start.img"
></el-image>
<span>{{ scope.row[item.prop] }}</span>
</span>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
4、使用 slot 插槽
<el-table
size="small"
border
v-loading="loading"
:data="tableData"
>
<el-table-column
v-for="(item, index) in columns"
:key="index"
v-bind="item"
align="center"
>
<template slot-scope="scope" slot="status">
<span>{{ scope.row.status == '0' ? "开启" : "关闭"}}</span>
</template>
</el-table-column>
</el-table>
columns: [
{
type:"index",
label: "序号“,
width: "55",
align: "center"
},
{
label: "状态",
prop: "status",
slot: "status",
}
]
5、注意
使用template 自定义时，columns中的序号列显示不出来，需要在代码中重新编写，
例：
<el-table
size="small"
border
v-loading="loading"
:data="tableData"
>
<el-table-column
label="序号"
type="index"
>
</el-table-column>
<el-table-column
v-for="(item, index) in columns"
:key="index"
v-bind="item"
align="center"
>
<template slot-scope="scope" slot="status">
<span>{{ scope.row.status == '0' ? "开启" : "关闭"}}</span>
</template>
</el-table-column>
</el-table>
columns: [
// {
// type:"index",
// label: "序号“,
// width: "55",
// align: "center"
// },
{
label: "状态",
prop: "status",
slot: "status",
}
]
