[element-ui]根据 el-table的某一列值大小设置该列背景颜色宽度

效果展示：

代码展示：

<template>
  <el-table :data="tableData" style="width: 100%" :cell-style="cellStyle">
    <el-table-column prop="name" label="姓名" >
    </el-table-column>
    <el-table-column prop="value" label="数值" >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {name:'张三', value: 10 },
        {name:'李四', value: 8 },
        {name:'王五', value: 6 }
      ]
    };
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if(column.property == 'value'){
         // 计算最大值
          const maxValue = Math.max(...this.tableData.map(item => item.value));
          // 计算当前值占最大值的比例
          let ratio = row.value / maxValue;
          // 返回样式对象，设置背景色的宽度
          return {
            background: `linear-gradient( to right , green ${ratio * 100}%, transparent ${ratio * 100}%)`, // 设置背景颜色
            color: '#fff'
          };
        }
    }
  }
};
</script>

注意：在 CSS 中，`background Size` 属性是用来调整背景图像的尺寸的，而不是用来设置背景颜色填充的宽度。所以是上面的代码使用了 `linear- gradient` 函数来创建一个从左到右的渐变，其中绿色部分根据 `ratio` 的值来决定宽度（以百分比表示），剩余部分则是透明的。这样，您就可以根据 `value ` 的值动态地改变背景绿色的填充宽度了。

原文地址：https://blog.csdn.net/m0_67841039/article/details/143859094

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！