[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 ` 的值动态地改变背景绿色的填充宽度了。