【Vue】element-plus 字体变色之cell-style

小鱼儿 2024-03-25 20:56 26阅读 0赞

> **目录**
> 
> 一 、需求
> 
> 二、方法之cell-style
> 
> 1 、cell-style
> 
> 2 、表格绑定cell-style属性
> 
> 3 、数据操作
> 
> 三 、方法之el-tag
> 
> 1 、el-table-column
> 
> 2、方法eachColor()\{\}
> 
> --------------------
> 
> ### 一 、需求 ###
> 
>     根据列表列值的不同显示不同颜色
> 
> ### 二、方法之cell-style ###
> 
> #### 1 、cell-style ####
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td style="width:95px;"><strong>cell-style</strong></td> 
>    <td style="width:325px;"><strong>单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。</strong></td> 
>    <td><strong>Function({row, column, rowIndex, columnIndex})/Object</strong></td> 
>   </tr> 
>  </tbody> 
> </table>
> 
>  *  row:当前行
>  *  columnIndex: 列下标
> 
> #### 2 、表格绑定cell-style属性 ####
> 
>     <el-table
>               :data="tableData"
>               :row-style="rowState"
>               :cell-style="cellStyle"
>               style="width: 100%"
>             >
> 
> #### 3 、数据操作 ####
> 
>     const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
>       // 状态列字体颜色
>       if (row.level >2 && columnIndex === 8) {
>             return {'color': 'red'}; //方法1
>             return "color: #FF0000"; //方法2
>         }
>     }
> 
> ### 三 、方法之el-tag ###
> 
> #### 1 、el-table-column ####
> 
>     <el-table-column
>           label="姓名"
>           width="180">
>           <template slot-scope="scope">
>               <el-tag :type="eachColor(scope.row.level)">{
>         {
>                 scope.row.level
>               }}</el-tag>
>             </el-popover>
>           </template>
>         </el-table-column>
> 
> #### 2、方法eachColor()\{\} ####
> 
>     eachColor(level) {
>           if (level == "5") {
>             return "danger";
>           }
>           if (level == "4") {
>             return "warning";
>           }
>           if (level == "3") {
>             return "info";
>           }
>           ...
>         },
> 
> ![e958b6f86c0144cf923d4e6d5295707f.png][]
> 
> **有用请点赞，养成良好习惯！**
> 
> **疑问、交流、鼓励请留言！**

[e958b6f86c0144cf923d4e6d5295707f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e60aa6c333c649238898fa74e1309ccc.png