需求
可编辑表格(table整体可编辑)
默认效果如下
编辑态效果如下
并且,方向&车道类型要联动相位名称
好了,开始编码
/*
* 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>