vue table

最近写一个小的功能真的是掉进坑里，迟迟写不下去，索性放弃，今早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>