表格内容渲染方法

---

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-tablesize="small"borderv-loading="loading":data="tableData"@selection-change="select"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnv-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-tablesize="small"borderv-loading="loading":data="tableData"@selection-change="select"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnv-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-tablesize="small"borderv-loading="loading":data="tableData"><el-table-columnv-for="(item, index) in columns":key="index"v-bind="item"align="center"><template slot-scope="scope"><span v-if="item.prop==='status'"><el-imageclass="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-tablesize="small"borderv-loading="loading":data="tableData"><el-table-columnv-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-tablesize="small"borderv-loading="loading":data="tableData"><el-table-columnlabel="序号"type="index"></el-table-column><el-table-columnv-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",}
]