el-table-column 结合template对某列后台数值,在前端显示对应文字,并不同数据显示对应不同样式
el-table-column 结合template对某列后台数值,在前端显示对应文字,并分不同的状态,显示醒目新需求:对table中的某列,后台数据为数字,在前端显示对应的中文,并根据数值,对数据分为三个状态,为空、进行中、完成。对vue刚入门没多久的我,自然首先百度。嗯,确实查到了方法。但是,不适用我的情况。<el-table :data="tableData" style="width
·
el-table-column 结合template对某列后台数值,在前端显示对应文字,并分不同的状态,显示醒目
新需求:对table中的某列,后台数据为数字,在前端显示对应的中文,并根据数值,对数据分为三个状态,为空、进行中、完成。
对vue刚入门没多久的我,自然首先百度。
嗯,确实查到了方法。但是,不适用我的情况。
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="sex" label="性別" width="180" :formatter="formatSex"></el-table-column>
</el-table>
而我的情况,我是循环显示的。
<el-table-column
v-for="column in TableColumns"
:prop="column.field"
:label="column.label"
:key="column.label"
sortable="custom">
</el-table-column>
利用formatter属性,可以从官方的帮助文档里查到。
后来,采用template
slot-scope="scope"定义模板
scope 是随便起的名字,通过scope获取数据
基本模板
<el-table :data="tableData" style="width: 100%;text-align: center;" height="360">
<el-table-column label="序号" width="180">
<template slot-scope="scope">
<div></div>
</template>
</el-table-column>
</el-table>
我一开始,在方法中进行分情况讨论。但是,无法与template结合起来使用。
res.items.forEach(element => {
console.log(element.jd)
if(element.jd == null){
element.jd = "当前进度为空"+"("+"0/9"+")"
}else if(element.jd == "1"){
element.jd = "步骤1"+"("+(element.jd)+"/9"+")"
}
else if(element.jd == "2"){
element.jd = "步骤2"+"("+(element.jd)+"/9"+")"
}
.....
最后终于完成了需求,以下为一些主要代码。
由于我这个场景比较特殊,所以首先把要不同的那列拎出来。在对状态进行判断显示对应的内容。
<template slot-scope="scope">
//针对进度这一列
<div v-if="column.field == 'jd'">
//当进度为null,或者为""时,显示空,并为红色
<div v-if="scope.row.jd == null || scope.row.jd == ''">
<div class="kong"><span>空</span></div>
</div>
//当进度为1到8时,显示为绿色
<div v-else-if="scope.row.jd > 0 && scope.row.jd < 9">
<div class="jxz">
<span v-if="scope.row.jd == 1">步骤1({{ scope.row.jd }}/9)</span>
<span v-if="scope.row.jd == 2">步骤2({{ scope.row.jd }}/9)</span>
//......以此类推
</div>
</div>
//当进度为9时,即完成,显示为蓝色
<div v-else>
<div class="wancheng">
<span v-if="scope.row.jd == 9">最后一步({{ scope.row.jd }}/9)</span>
</div>
</div>
</div>
//这个很重要,我一开始忘写了,导致表格中的其他列,不显示了。
//这块是为了显示其他列的,千万不要忘。
<div v-else>
{{scope.row[scope.column.property]}}
</div>
</template>
在为kong、jxz、wancheng
设置样式。
结果如下
如果,有更好的方法,欢迎留言。
更多推荐
所有评论(0)