关于el-table表格中的指定单元格设置指定颜色

在el-table标签中设置 :cell-style 属性

如:cell-style = cleeStyle

接着在方法中定义

cleeStyle({row, column, rowIndex, columnIndex}){

  let arr = [];

  for(let item in row) {

    if(item !== 'type'){

      arr.push(Number(row[item]))

    }

  };

  if(columnIndex -1 === arr.indexOf(Math.max.apply(null,arr))) {

  //columnIndex -1 是因为第一列不是数字

  //arr.indexOf(Math.max.apply(null,arr)) 可以拿到最大值的下标

    return 'color : red';

  }

  if(columnIndex -1 === arr.indexOf(Math.min.apply(null,arr))) {

  //arr.indexOf(Math.min.apply(null,arr)) 可以拿到最小值的下标

    return 'color : green';

  }

};

上述代码可以实现每一行中的最大值和最小值设置不同的颜色。但是有个问题就是,如果一行中有重复的最大值或者最小值,只会标记第一个最大值或者最小值。

实现一行中所有的最大值和最小值全部标记,使用以下代码:

cleeStyle({row, column, rowIndex, columnIndex}){

  let arr = [];

  for(let item in row) {

    if(item !== 'type'){

      arr.push(Number(row[item]))

    }

  }

  let maxIndex = 0,minIndex = 0, minIndexArr = [], maxIndexArr = [];

  maxIndex = arr.indexOf(Math.max.apply(null,arr));

  minIndex = arr.indexOf(Math.min.apply(null,arr));

  arr.forEach((item, index) => {

    if (item === arr[minIndex]) {

      minIndexArr.push(index); 

    }

    if (item === arr[maxIndex]) {

      maxIndexArr.push(index); 

    }

  });

  if(maxIndexArr.indexOf(columnIndex -1) >= 0) {

    return 'color : red';

  }

  if(minIndexArr.indexOf(columnIndex -1) >= 0) {

    return 'color : green';

  }

};

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现这个功能,你需要在 `el-form-item` 添加校验规则。由于你的单元格数量是动态的,你需要在 `el-table` 数据源为每个单元格添加一个 `rules` 属性,用于存储对应的校验规则数组。 具体实现步骤如下: 1. 在 `el-table` 定义一个 `rules` 属性数组,其每个元素对应一个单元格的校验规则数组。 2. 定义一个方法,用于动态地为每个单元格设置校验规则。在这个方法,你可以根据单元格的位置和数据源的索引计算出对应的校验规则数组。 3. 在 `el-form-item` 使用 `:rules` 绑定对应单元格的校验规则数组即可。 下面是一个示例代码: ```html <el-form ref="form" :model="formData" :rules="tableRules"> <el-table :data="tableData"> <el-table-column prop="name" label="Name"> <template slot-scope="{ row }"> <el-form-item :rules="getRules(row.index, 'name')"> <el-input v-model="row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="age" label="Age"> <template slot-scope="{ row }"> <el-form-item :rules="getRules(row.index, 'age')"> <el-input v-model="row.age"></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form> ``` ```js export default { data() { return { formData: {}, tableData: [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 30 }, ], tableRules: [ [ { required: true, message: 'Name is required', trigger: 'blur' }, { min: 3, max: 10, message: 'Name length should be between 3 and 10', trigger: 'blur' }, ], [ { required: true, message: 'Age is required', trigger: 'blur' }, { type: 'number', message: 'Age should be a number', trigger: 'blur' }, { min: 18, max: 60, message: 'Age should be between 18 and 60', trigger: 'blur' }, ], ], }; }, methods: { getRules(rowIndex, prop) { return this.tableRules[rowIndex][this.getColumnIndex(prop)]; }, getColumnIndex(prop) { return this.$refs.table.columns.findIndex((c) => c.property === prop); }, }, }; ``` 在这个示例,我们为 `el-table` 定义了一个 `tableRules` 属性,其每个元素对应一个单元格的校验规则数组。然后我们在每个 `el-form-item` 使用 `getRules` 方法动态地获取对应单元格的校验规则数组。最后,在 `getRules` 方法,我们根据单元格的位置和数据源的索引计算出对应的校验规则数组。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值