最近写一个小的功能真的是掉进坑里,迟迟写不下去,索性放弃,今早1小时全部搞定。
<template>
<!-- 上传文件加进度条 -->
<el-form ref="ruleForm" label-width="200px" class="demo-ruleForm">
<el-form-item label='上传文件'>
<el-table :data="tableData" style="width: 500px; margin-top: 100px;" border >
<el-table-column label="配置名">
<template slot-scope="scope">
<el-select v-model="scope.row.name" placeholder="请选择配置项" @change="handelChange(scope.row, $event)" @visible-change='handelVisibleChange(scope.row, $event)'>
<el-option v-for="(item, index) in scope.row.options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="配置值">
<template slot-scope="scope">
<el-input v-model='scope.row.total'></el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<button @click="addTableList">添加配置项</button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '', options: [], total: '', selectInfo: '', },
],
optionsAll: [
{label: 'table1', value: '1'}, {label: 'table2', value: '2'}, {label: 'table3', value: '3'}, {label: 'table4', value: '4'}, {label: 'table5', value: '5'}
]
};
},
methods: {
addTableList() {
let obj = {
name: '', options: [], total: '', selectInfo: ''
}
this.tableData.push(obj);
},
handelChange(val, type) {
val.selectInfo = type;
this.optionsAll.forEach((item, index) => {
if(item.value == type) {
val.name = item.label;
}
})
},
handelVisibleChange(rows, type) {
if(type) {
let optionsAll = [
{label: 'table1', value: '1'}, {label: 'table2', value: '2'}, {label: 'table3', value: '3'}, {label: 'table4', value: '4'}, {label: 'table5', value: '5'}
]
rows.options = this.array_diff(optionsAll, this.tableData);
}
},
array_diff(a, b) { // 数组去除重复
for(var i=0;i<b.length;i++) {
for(var j=0;j<a.length;j++) {
if(a[j].value==b[i].selectInfo){
a.splice(j,1);
j=j-1;
}
}
}
return a;
},
handleDelete(index, row) {
this.tableData.splice(index, 1)
},
},
}
</script>