记动态编辑el-table,v-for表头数据,不重新渲染的问题

345 阅读2分钟

需求

可编辑表格(table整体可编辑)
默认效果如下

image.png

编辑态效果如下

image.png

并且,方向&车道类型要联动相位名称

好了,开始编码

    /*
* columns说明
* required:是否必填
* enum:是否要进行翻译(翻译的具体内容)
* join:是否与其他字段进行联动(比如选择的内容影响其他字段结果)
* template:操作的方式,input或者下拉框等,如果为select,template的值为下拉的options集合[{value:1,label:'是'}]
* */
/*
* eltable-column 不更新渲染是因为key没变
* */
let phaseEnum = window.localStorage.getItem('phaseEnum');
if (phaseEnum) {
  phaseEnum = JSON.parse(phaseEnum);
}
// 相位配置展示
export const phaseConfigCol = [
  {uid: 1, prop: 'phaseId', label: '相位编号'},
  {uid: 2, prop: 'direction', label: '方向', required: true},
  {uid: 3, prop: 'laneType', label: '车道类型', required: true},
  {uid: 4, prop: 'phase', label: '相位名称'},
  {uid: 5, prop: 'trunk', label: '干线', required: true, enum: {1: '是', 2: '否'}},
  {uid: 6, prop: 'maxGreen', label: '最大绿',},
  {uid: 7, prop: 'minGreen', label: '最小绿'},
  {uid: 8, prop: 'greenLoss', label: '损失时间'},
  {uid: 9, prop: 'greenInterval', label: '相位间隔'},
  {uid: 10, prop: 'exLossTime', label: '额外损失时间'},
  {uid: 11, prop: 'satud', label: '相位饱和度'},
  {uid: 12, prop: 'weight', label: '相位权重'},
];
// 联动函数
const joinHandler = row => {
  row.phase = (row.direction || '') + (row.laneType || '');
}
export const editphaseConfigCol = [
  {uid: 13, prop: 'phaseId', label: '相位编号'},
  {
    uid: 14,
    prop: 'direction', label: '方向', required: true,
    template: [
      {value: '东向', label: '东向'},
      {value: '西向', label: '西向'},
      {value: '南向', label: '南向'},
      {value: '北向', label: '北向'},
    ],
    join: joinHandler
  },
  {
    uid: 15,
    prop: 'laneType', label: '车道类型', required: true,
    template: [
      {value: '直行', label: '直行'},
      {value: '左转', label: '左转'},
      {value: '右转', label: '右转'},
      {value: '人行', label: '人行'},
    ],
    join: joinHandler
  },
  {uid: 16, prop: 'phase', label: '相位名称'},
  {
    uid: 17,
    prop: 'trunk', label: '干线', required: true,
    template: [
      {value: 1, label: '是'},
      {value: 2, label: '否'},
    ]
  },
  {
    uid: 18,
    prop: 'maxGreen', label: '最大绿',
    template: 'input',
  },
  {uid: 19, prop: 'minGreen', label: '最小绿', template: 'input',},
  {uid: 20, prop: 'greenLoss', label: '损失时间', template: 'input',},
  {uid: 21, prop: 'greenInterval', label: '相位间隔', template: 'input',},
  {uid: 22, prop: 'exLossTime', label: '额外损失时间', template: 'input',},
  {uid: 23, prop: 'satud', label: '相位饱和度', template: 'input',},
  {uid: 24, prop: 'weight', label: '相位权重', template: 'input',},
];

// 下面是表头

<el-table-column
              v-for="item in laneConfigCol"
              :prop=item.prop
              /*****************问题就是出在这里,key相同就不会重新渲染*****************/
              :key="item.uid"
              :width=item.width
              :class-name="item.required?'required':''"
              :label=item.label>
              <template slot-scope="scope">
                <div v-if="item.template">
                  <el-input onkeyup="value=value.replace(/[^\.\d]/g,'')" maxlength="12"
                            v-model="scope.row[item.prop]"
                            v-if="item.template==='input'"></el-input>
                  <div v-else>
                    <el-select
                      v-if="item.join"
                      v-model="scope.row[item.prop]"
                      placeholder="请选择"
                      :multiple="item.multiple"
                      @change="item.join(scope.row)"
                    >
                      <el-option
                        v-for="i in item.template"
                        :key=i.value :label=i.label :value=i.value
                      ></el-option>
                    </el-select>
                    <el-select
                      v-else
                      :multiple="item.multiple"
                      v-model="scope.row[item.prop]"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="i in item.template"
                        :key=i.value :label=i.label :value=i.value
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div v-else>
                  <div v-if="item.enum">
                    {{ item.enum[scope.row[item.prop]] || item.enum(scope.row[item.prop]) }}
                  </div>
                  <div v-else>{{ scope.row[item.prop] }}</div>
                </div>
              </template>
            </el-table-column>