问题形容
在饿了么ui的框架中，输出数据el-form，输入数据el-table。有时候产品想让干燥的表格来点动静的款式，比方不同的内容展现不同的款式，对于这个需要，其实形式有很多种，本文列举两种，以供参考。
实现形式一
效果图如下
代码如下
<template> <div id="app"> <!-- 需要：三国人物表格，要求不同的国别展现不同的色彩（魏国红色、蜀国彩色、吴国蓝色） --> <el-table :data="tableData" style="width: 100%"> <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="scope.row.nation == '魏国'" style="color:red;font-weight:bold;">{{scope.row.nation}}</div> <div v-if="scope.row.nation == '蜀国'" style="color:black;font-weight:bold;">{{scope.row.nation}}</div> <div v-if="scope.row.nation == '吴国'" style="color:blue;font-weight:bold;">{{scope.row.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: "河东郡解县（山西省运城市盐湖区解州镇）", }, ], }; },};</script>形式一总结
这个第一种形式，尽管能实现成果，然而代码都写在el-table外面了，看起来比拟臃肿，如果只要求动静展现两三种款式的话，还能够写，然而如果有七八种甚至更多样式动静展现，这种写法就会非常臃肿，且前期不太好保护。我集体举荐第二种形式，就是应用vue自带的 :style 动静绑定款式来实现，不仅能够简洁代码，而且能够实现更加丰盛的成果。如下：
实现形式二
效果图如下
代码如下
<template> <div id="app"> <!-- 需要：三国人物表格，要求不同的国别展现不同的色彩（魏国红色、蜀国彩色、吴国蓝色） --> <el-table :data="tableData" style="width: 100%"> <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 :style="{color:getColorByNation(scope),fontSize:getSizeByNation(scope),fontWeight:'bold'}">{{scope.row.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是对应表格不同行的整行的数据，如下有图片： if(scope.row.nation == "魏国"){ return "red" }else if(scope.row.nation == "蜀国"){ return "black" }else if(scope.row.nation == "吴国"){ return "blue" } }, // 动静设置字体大小 getSizeByNation(scope){ if(scope.row.nation == "魏国"){ return "14px" }else if(scope.row.nation == "蜀国"){ return "18px" }else if(scope.row.nation == "吴国"){ return "24px" } } },};</script> 打印传过来的scope
形式二总结
这种通过vue绑定款式来管制，比第一种形式，灵便很多。毕竟第一种形式是写在el-table外面，第二种形式是写在methods办法外面。具体用那种，看场景需要。
随笔记录一下，哈哈