根据饿了么的布局标签遍历数组设计出了一个表格，现在想获取某行和某行中某列的值，并重新赋值，该如何实现？

  • Z时代
  • 2024-02-21
  • 分类：IT

ui:

<el-row v-for="(item, index) in list " :key="index" class="table-col">
      <el-col v-for="( item2, index2 ) in  item " :key="index2" :span="24 / item.length" class="table-item">
        <span
          :class="[item2.title === 'Result' ? activeCls : '', item2.title === 'SN' ? 'darkblue' : '', item2.title === 'Time' ? 'green' : '', item2.title === '工站' ? 'green' : '', labelCls]">{{
            item2.title }}</span>
        <span :class="[item2.value === 'NG' ? activeCls : '', valueCls]">{{ item2.value }}</span>
      </el-col>
    </el-row>

参考实现：

UI：
<el-row v-for="(item, index) in list " :key="index" class="table-col">
      <el-col v-for="( item2, index2 ) in  item " :key="index2" :span="24 / item.length" class="table-item">
        <span :class="getTitleClass(item2)">{{ item2.title }}</span>
        <span :class="getValueClass(item2, 3, 2)">{{ item2.value }}</span>
      </el-col>
 </el-row>
shouldHighLight (rowIndex, colIndex) {
      const axis = []
      const arr = this.list
      for (let rowIndex = 0; rowIndex < arr.length; rowIndex++) {
        // eslint-disable-next-line no-empty
        for (let colIndex = 0; colIndex < arr[rowIndex].length; colIndex++) {
        }
      }
      return axis[rowIndex][colIndex]
    }

回答：

<template>
  <el-row v-for="(item, index) in list" :key="index" class="table-col">
    <el-col v-for="(item2, index2) in item" :key="index2" :span="24 / item.length" class="table-item">
      <span :class="getTitleClass(item2)">{{ item2.title }}</span>
      <span :class="getValueClass(item2, index, index2)">{{ item2.value }}</span>
    </el-col>
  </el-row>
</template>
<script>
export default {
  // ...
  methods: {
    getTitleClass(item) {
      const classes = [this.labelCls];
      if (item.title === 'Result') classes.push(this.activeCls);
      else if (item.title === 'SN') classes.push('darkblue');
      else if (item.title === 'Time' || item.title === '工站') classes.push('green');
      return classes;
    },
    getValueClass(item, rowIndex, colIndex) {
      const classes = [this.valueCls];
      if (item.value === 'NG') classes.push(this.activeCls);
      if (this.shouldHighlight(rowIndex, colIndex)) classes.push('highlight-class');
      return classes;
    },
    shouldHighlight(rowIndex, colIndex) {
    },
  },
};
</script>

以上是 根据饿了么的布局标签遍历数组设计出了一个表格，现在想获取某行和某行中某列的值，并重新赋值，该如何实现？ 的全部内容， 来源链接： utcz.com/p/934616.html

回到顶部