el-table实现动态添加行，并且有父子级联动下拉框

本文主要是介绍el-table实现动态添加行，并且有父子级联动下拉框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><div><el-button @click="addRow">添加行</el-button><el-table :data="tableData" style="width: 100%"><el-table-column label="序号"type="index"width="100"align="center"></el-table-column><el-table-column prop="name" label="名称"><template slot-scope="scope"><el-input v-model="scope.row.name"></el-input></template></el-table-column><el-table-column prop="firstLevel" label="一级下拉框"><template slot-scope="scope"><el-select v-model="scope.row.firstLevel" @change="handleFirstLevelChange(scope.$index)"><el-optionv-for="item in firstLevelOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></el-table-column><el-table-column prop="secondLevel" label="二级下拉框"><template slot-scope="scope"><el-select v-model="scope.row.secondLevel"><el-optionv-for="item in getSecondLevelOptions(scope.row.firstLevel)":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></el-table-column><el-table-column prop="inputValue" label="输入框"><template slot-scope="scope"><el-input v-model="scope.row.inputValue" :placeholder="getInputPlaceholder(scope.row.secondLevel)"></el-input></template></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{ name: '', firstLevel: '', secondLevel: '', inputValue: '' }],firstLevelOptions: [{ value: 'A', label: '选项A' },{ value: 'B', label: '选项B' },{ value: 'C', label: '选项C' },],secondLevelOptions: {A: [{ value: 'A1', label: '选项A1' }, { value: 'A2', label: '选项A2' }],B: [{ value: 'B1', label: '选项B1' }, { value: 'B2', label: '选项B2' }],C: [{ value: 'C1', label: '选项C1' }, { value: 'C2', label: '选项C2' }],},inputPlaceholders: {A1: '请输入A1相关的信息',A2: '请输入A2相关的信息',B1: '请输入B1相关的信息',B2: '请输入B2相关的信息',C1: '请输入C1相关的信息',C2: '请输入C2相关的信息',},};},methods: {addRow() {this.tableData.push({ name: '', firstLevel: '', secondLevel: '', inputValue: '' });},handleFirstLevelChange(index) {console.log(index,'index')this.tableData[index].secondLevel = '';},getSecondLevelOptions(firstLevel) {console.log(firstLevel,'firstLevel')return this.secondLevelOptions[firstLevel] || [];},getInputPlaceholder(secondLevel) {console.log(secondLevel,'secondLevel')return this.inputPlaceholders[secondLevel] || '';},},
};
</script>

互不影响

这篇关于el-table实现动态添加行，并且有父子级联动下拉框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---