vue如何使用element ui表格el-table-column在里面做判断
更新时间:2024年08月10日 09:41:58 作者:我的86呢!
这篇文章主要介绍了vue如何使用element ui表格el-table-column在里面做判断问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用element ui表格el-table-column在里面做判断
第一种

效果:

第二种


效果:

代码:
//第一种
<el-table-column prop="status"
label="样本状态"
width="180">
<template slot-scope="scope">
<span v-show="scope.row.status==1">已取样</span>
<span v-show="scope.row.status==2">实验室处理中</span>
<span v-show="scope.row.status==3">测序中</span>
<span v-show="scope.row.status==3">数据分析中</span>
<span v-show="scope.row.status==3">已完成</span>
</template>
</el-table-column>
//第二种
<el-table-column prop="type"
label="样本类型"
:formatter="sample">
<!-- <template slot-scope="scope">
<span v-show="scope.row.type==1">血液</span>
<span v-show="scope.row.type==2">尿液</span>
<span v-show="scope.row.type==3">唾液</span>
</template> -->
</el-table-column>
sample(row, column, cellValue) {
if (cellValue == '1') {
return '血液'
} else if (cellValue == '2') {
return '尿液'
} else {
return '唾液'
}
},总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
axios请求头设置常见Content-Type和对应参数的处理方式
这篇文章主要介绍了axios请求头设置常见Content-Type和对应参数的处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue中对象的赋值Object.assign({}, row)方式
这篇文章主要介绍了vue中对象的赋值Object.assign({}, row)方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03
Vue中addEventListener() 监听事件案例讲解
这篇文章主要介绍了Vue中addEventListener() 监听事件案例讲解,包括语法讲解和事件冒泡或事件捕获的相关知识,本文结合示例代码给大家讲解的非常详细,需要的朋友可以参考下2022-12-12


最新评论