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

乐容

于 2024-08-21 13:27:25 发布

阅读量241

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_61265297/article/details/141391075

版权

<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-option
              v-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-option
              v-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>