动态实现elementui的el-table某列数据不同样式的⽰例
问题描述
在饿了么ui的框架中，输⼊数据el-form，输出数据el-table。有时候产品想让枯燥的表格来点动态的样式，⽐如不同的内容展⽰不同的样式，对于这个需求，其实⽅式有很多种，本⽂列举两种，以供参考。
实现⽅式⼀
效果图如下
代码如下
<template>
<div id="app">
<!-- 需求：三国⼈物表格，要求不同的国别展⽰不同的颜⾊（魏国红⾊、蜀国⿊⾊、吴国蓝⾊） -->
<el-table :data="tableData" >
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="nation" label="国别" width="180">
<!-- 思路通过模板插槽，获取对应的数据，不同的数据展⽰不同的颜⾊，当然只能让显⽰⼀个（通过v-if控制） -->
<template scope="scope">
<div v-if="w.nation == '魏国'" >{{w.nation}}</div>
<div v-if="w.nation == '蜀国'" >{{w.nation}}</div>
<div v-if="w.nation == '吴国'" >{{w.nation}}</div>
</template>
</el-table-column>
<el-table-column prop="bornPlace" label="出⽣地⽅"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
tableData: [
{
name: "刘备",
nation: "蜀国",
bornPlace: "涿郡涿县（河北省涿州市）",
},
{
name: "曹操",
nation: "魏国",
bornPlace: "沛国谯县（安徽省亳州市）",
},
{
name: "孙权",
nation: "吴国",
bornPlace: "吴郡富春县（浙江省杭州市富阳区）",
},
{
name: "关⽻",
nation: "蜀国",
bornPlace: "河东郡解县（⼭西省运城市盐湖区解州镇）",
},
],
};
},
fontweight属性bold};
</script>
⽅式⼀总结
这个第⼀种⽅式，虽然能实现效果，但是代码都写在el-table⾥⾯了，看起来⽐较臃肿，如果只要求动态展⽰两三种样式的话，还可以写，但是如果有七⼋种甚⾄更多样式动态展⽰，这种写法就会⼗分臃肿，且后期不太好维护。我个⼈推荐第⼆种⽅式，就是使⽤vue⾃带的 :style 动态绑定样式来实现，不仅可以简洁代码，⽽且可以实现更加丰富的效果。如下：
实现⽅式⼆
效果图如下
代码如下
<template>
<div id="app">
<!-- 需求：三国⼈物表格，要求不同的国别展⽰不同的颜⾊（魏国红⾊、蜀国⿊⾊、吴国蓝⾊） -->
<el-table :data="tableData" >
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="nation" label="国别" width="180">
<!-- 思路通过模板插槽，获取对应的数据，通过vue动态style的⽅法，动态显⽰不同的颜⾊，这种⽅式更加灵活 -->
<template scope="scope">
<!-- 意思是：给这个div绑定动态样式，颜⾊color的属性值为getColorByNation()这个⽅法的返回值，所以只需要通过传过去的scope 对⽅法的返回值做动态设置即可 --> <div :>{{w.nation}}</div>
</template>
</el-table-column>
<el-table-column prop="bornPlace" label="出⽣地⽅"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
tableData: [
{
name: "刘备",
nation: "蜀国",
bornPlace: "涿郡涿县（河北省涿州市）",
},
{
name: "曹操",
nation: "魏国",
bornPlace: "沛国谯县（安徽省亳州市）",
},
{
name: "孙权",
nation: "吴国",
bornPlace: "吴郡富春县（浙江省杭州市富阳区）",
},
{
name: "关⽻",
nation: "蜀国",
bornPlace: "河东郡解县（⼭西省运城市盐湖区解州镇）",
},
],
};
},
methods: {
// 动态设置颜⾊
getColorByNation(scope){
console.log(scope); // 打印⼀下传过来的scope是对应表格不同⾏的整⾏的数据，如下有图⽚：
w.nation == "魏国"){
return "red"
}else w.nation == "蜀国"){
return "black"
}else w.nation == "吴国"){
return "blue"
}
},
// 动态设置字体⼤⼩
getSizeByNation(scope){
w.nation == "魏国"){
return "14px"
}else w.nation == "蜀国"){
return "18px"
}else w.nation == "吴国"){
return "24px"
}
}
},
};
</script>
打印传过去的scope
⽅式⼆总结
这种通过vue绑定样式来控制，⽐第⼀种⽅式，灵活很多。毕竟第⼀种⽅式是写在el-table⾥⾯，第⼆种⽅式是写在methods⽅法⾥⾯。具体⽤那种，看场景需求。
到此这篇关于动态实现element ui的el-table某列数据不同样式的⽰例的⽂章就介绍到这了，更多相关动态实现element ui的el-table某列数据不同样式的⽰例内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论