html代码如下：
<el-table
:data="tableBody"
border
class="tb-edit"
style="width: 100%"
ref="multipleTable"
@cell-dblclick="celldbClick"
@selection-change="rowStyleChange"
:row-class-name="rowClass"
@header-click="hendClick"
>
<el-table-column type="selection" width="50" fixed></el-table-column>
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
header-align="center"
:label="item.headKey"
width="250"
:class-name="item.headKey+' '+item.fieIdType"
>
<template slot-scope="scope">
<span
v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType!='ElSelect'"
>{{scope.row.fieldVal[item.headKey]}}</span>
<el-input
v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElInput'"
@blur="inputBlur"
:name="item.headKey"
clearable
v-model="scope.row.fieldVal[item.headKey]"
></el-input>
<span
v-if="!showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElSelect'"
>{{scope.row.fieldVal[item.headKey+'_NAME']}}</span>
<el-select
v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElSelect'"
v-model="scope.row.fieldVal[item.headKey]"
:name="item.headKey"
collapse-tags
style="margin-left: 20px;"
placeholder="请选择"
@change="selchange(scope.row.fieldVal[item.headKey],item.headKey,scope.$index)"
>
<el-option
v-for="option in selList[item.headKey]"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
<el-input-number
v-if="showEdit[scope.$index][item.headKey]&&item.fieIdType=='ElInputNumber'"
v-model="scope.row.fieldVal[item.headKey]"
:min="0"
label="描述文字"
@change="numSum(scope.row.fieldVal,item.headKey)"
></el-input-number>
</template>
</el-table-column>
</el-table>
单元格中下拉框数据格式：
//模拟数据
{
value: "10001",
label: "正常装",
subList: [
{ value: "10001.001", label: "纯新品", subList: [] },
{ value: "10001.002", label: "新产品", subList: [] },
{
value: "10001.003",
label: "产品硬转换",
subList: [
{
value: "10001.003.001",
label: "有条形码变化的硬转换",
subList: []
},
{
value: "10001.003.002",
label: "无条形码变化的硬转换",
subList: []
}
]
},
{
value: "10001.004",
label: "产品软转换",
subList: [
{
value: "10001.004.001",
label: "有首单日的软转换",
subList: []
},
{
value: "10001.002",
label: "无首单日的软转换",
subList: []
}
]
},
{
value: "10001.005",
label: "现有的产品改变上市范围",
subList: []
},
{
value: "10001.006",
label: "停产并无新品代替",
subList: []
}
]
},
{
value: "10002",
label: "促销装",
subList: [
{ value: "10002.001", label: "纯新品", subList: [] },
{ value: "10002.002", label: "新产品", subList: [] },
{ value: "10002.003", label: "产品软转换", subList: [] },
{
value: "10002.004",
label: "现有的产品改变上市范围",
subList: []
},
{
value: "10002.005",
label: "现有产品重新上市",
subList: []
},
{
value: "10002.006",
label: "持续在卖且上配额的促销装",
subList: []
},
{
value: "10002.007",
label: "停产并无新品代替",
subList: [
{ value: "10002.008", label: "白夜", subList: [] },
{ value: "10002.009", label: "白夜2", subList: [] }
]
}
]
}
methods:
主题思想主要是当表格渲染的同时，根据表头返回的数据获取所有的key，并且默认所有的key为false【不可编辑】，并用showEdit储存；并且在watch下监听表体数据tableBody,如果数据变化就从新渲染表格；
//初始化单元格状态
setShowEditInit() {
for (let item of this.showEdit) {
for (let subItem in item) {
item[subItem] = false;
}
}
},
setShowEdit() {
let tempShowEdit = [];
for (let item of this.tableBody) {
let tempShow = {};
for (let subItem in item.fieldVal) {
tempShow[subItem] = false;
}
tempShowEdit.push(tempShow);
}
this.showEdit = tempShowEdit;
},
//循环查找对应的下拉框
cycleSearch(currefieId, curreval) {
let objitem = [];
if (currefieId != "STEP1") {
let ptypeItem = this.cachePnameList.find(
item => item.value == curreval
);
if (ptypeItem) {
this.selList[currefieId] = ptypeItem.subList;
} else {
let ptype = this.subcycle(curreval, this.cachePnameList);
this.selList[currefieId] = ptype.subList;
}
} else {
this.selList[currefieId] = this.cachePnameList;
}
},
//循环查找对应的值
subcycle(subval, subItem) {
let options = this.cachePnameList;
let obj = "";
for (let i = 0; i < options.length; i++) {
let refs = this.findcycle(subval, options[i]);
if ($.isPlainObject(refs)) {
obj = refs;
break;
} else {
continue;
}
}
return obj;
},
findcycle(subval, option) {
let subVal = option.subList.find(subItem => {
if (subItem.value != subval) {
this.findcycle(subval, subItem);
} else {
return subItem;
}
});
return subVal;
},
callback(row, cellIndex) {
//获取当前行所有的key
--cellIndex;
let call_key = Object.keys(row.fieldVal)[cellIndex];
if (row.fieldVal[call_key] == "") {
return this.callback(row, cellIndex);
} else {
return row.fieldVal[call_key];
}
},
// 切换单元格为编辑
/*当用户双击某一个单元格的时候先找到对应列的key,根据得到的key去showEdit中去匹配key对应的值是否为true*/
celldbClick(row, column, cell, event) {
//判断点击的是否为下拉框
let name = column.className.split(" ");
//首先判断该单元格是否可编辑
if (!row.subList[name[0]]) {
this.$message({ message: "该单元格属性不允许编辑", type: "warning" });
return;
}
if (name[1] == "ElSelect") {
let parval = "";
//获取当前列的索引
let cellIndex = cell.cellIndex;
if (name[0] != "STEP1") {
parval = this.callback(row, cellIndex);
}
//单元格的类型
this.cycleSearch(name[0], parval);
//表示每一列的名称this.selList[name[0]]
}
this.setShowEditInit();
let newObj = column.label;
let index = this.tableBody.findIndex(
item => item.fieldVal.Id == row.fieldVal.Id
);
this.showEdit[index][newObj] = !this.showEdit[index][newObj];
},
handleEdit(row, index) {
this.tableBody[index] = row;
},
/*后台传入的表格数据分为表体projectList，表头headData*/
网友评论