实现一种常见的功能。默认有一项，当需要新增一项时候，点击添加按钮，当不需要这项的时候，点击删除按钮。
描述项是一个下拉项，每增加一项，新增加的描述项所选择的值不能与其他项选择的值相同，相同则提示。 该项已存在，请重新添加。
效果如下：
<el-table
:data="descriptionData"
style="width: 100%">
<el-table-column label="描述项" min-width="150" prop = "key">
<template slot-scope="scope">
<el-select size="small" v-model="scope.row.key" @change="selectDescript($event, scope.row, scope.$index)" placeholder="请选择">
<el-option v-for="item in dictArr.TRADE_BATTERY_CUSTOM" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column label="电池信息" min-width="150" prop="value">
<template slot-scope="scope">
<div v-if="scope.row.key">
<!-- 输入框 -->
<el-input
v-if="scope.row.descriptType == 'text'"
v-model="scope.row.value"
placeholder="请输入"
maxlength="30"
show-word-limit
autocomplete="off"
class="first-input"
size="small"
></el-input>
<!-- 日期选择 -->
<el-date-picker
v-else-if="scope.row.descriptType == 'date'"
v-model="scope.row.value"
type="month"
value-format="yyyy-MM"
placeholder="请选择日期"
size="small"
>
</el-date-picker>
<!-- 地址选择 -->
<AddresItem
v-else-if="scope.row.descriptType == 'area'"
:data-item="dataObj"
@selectedAreas="selectedAreas"
:cssObj="{'width':'100px'}"
></AddresItem>
<!-- 选择框 -->
<el-select
v-else
v-model="scope.row.value"
placeholder="请选择"
size="small"
>
<el-option
v-for="item in scope.row.selectOption"
:key="item.value"
:label="item.name"
:value="item.name"
/>
</el-select>
</div>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
v-if="descriptionData.length !== 1"
size="mini"
type="text"
class="el-icon-close colred"
@click="deleteRow(scope.$index, scope.row)"
></el-button>
<el-button
v-if="scope.$index == descriptionData.length - 1"
size="mini"
class="el-icon-plus clogreen"
type="text"
:disabled="!scope.row.addbtn"
@click="addRow(scope.$index, scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>data() {
return {
// 电池描述项
descriptionData: [{
key: '',
name: '',
value: '',
descriptType: '', // 根据这个值来显示电池信息列
selectOption: [],
addbtn: true
}],
// 重复对比数组。用来校验表格重复项key
descriptionDataCopy: []
}
}
// 描述项:删除一项
deleteRow(index, row) {
// console.log(index, row, this.descriptionDataCopy)
this.descriptionData.splice(index, 1)
// 删除表格一行，也要把重复对比数组的对应数据删除。
this.descriptionDataCopy.map(v=> {
if(row.key == v) {
this.descriptionDataCopy.splice(this.descriptionDataCopy.indexOf(v), 1)
}
})
},
// 描述项:添加一项
addRow(index, row) {
// console.log(index, row);
this.descriptionData.push({
key: '',
value: '',
name: '',
descriptType: '', // 根据这个值来显示电池信息列
selectOption: [],
addbtn: true
})
},
// 描述项:选择第一列
selectDescript(val, row, index) {
// console.log(val, row, this.descriptionDataCopy)
this.dictArr.TRADE_BATTERY_CUSTOM.map(v=> {
// 根据第一列选择的【描述项】，去找到这项对应的第二列【电池信息】是‘什么类型的文本’
if (val == v.value) {
row.name = v.name
row.descriptType = v.note
row.value = ''
if (v.note !== 'text' && v.note !== 'date' && v.note !== 'area') {
// TRADE_ITEM_STATUS,TRADE_CELL_SHAPE,TRADE_APPEARANCE
// 如果第二列【电池信息】是下拉项，则需要获取相应的字典
this.getDictData(v.note, row, true)
} else {
row.selectOption = []
}
this.descriptionDataCopy.push(val)
}
})
// 先判断是否重复
var str = this.descriptionDataCopy.join(",") + ","
for(let i=0; i<this.descriptionDataCopy.length; i++) {
// 如果第一列选择的【描述项】已经存在表格数据中，提示该项已经添加了
if(str.replace(this.descriptionDataCopy[i] + ",", "").indexOf(this.descriptionDataCopy[i] + ",") > -1) {
this.$message.error('该项已存在，请重新添加。')
row.name = ''
row.key = ''
break
}
}
// 去重
var newArr = [...new Set(this.descriptionDataCopy)]; //利用了Set结构不能接收重复数据的特点
this.descriptionDataCopy = newArr
},