关于segmentfault:动态实现element-ui的eltable某列数据不同样式比如颜色动态展示

97次阅读

共计 2738 个字符,预计需要花费 7 分钟才能阅读完成。

问题形容

在饿了么 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 办法外面。具体用那种,看场景需要。

随笔记录一下,哈哈

正文完
 0