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

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]
    }
阅读 2k
1 个回答
<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>

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题