vue技巧（三）动态下拉框 table实现动态组件

有一个需求是每点击一次添加，就自动生成一个新的下拉框。这类的需求一般都可以通过 table + 目标组件的方式获得，下面是要实现的效果图以及项目中使用的代码：

效果图：

代码： 

<div>
      <div style="text-align:left">
        <span >测试：</span>
        <el-button @click="addHierarchy">新增</el-button>
      </div>

       <el-table
        :data="tableData2"
        style="width: 100%">
         <el-table-column type="index"></el-table-column>
        <el-table-column prop="hierarchyDims" label="">
          <template slot-scope="scope">
            <el-select v-model="scope.row.hierarchyDims" multiple placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in dimOptimize"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="">
          <template slot-scope="scope">
            <el-button @click="deleteHierarchy(scope.row)" type="text" size="small" style="width:10%">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

rowIndex2: 0,
tableData2: [
   {
     id: 0,
     hierarchyDims: []
   }
],

    addHierarchy() {
      var id = this.rowIndex2 + 1 /** 自定义自增标识，用于删除时定位元素 */
      var tt = {hierarchyDims:[],id: id}
      this.tableData2.push(tt)
      this.rowIndex2 = id
    },

    deleteHierarchy(row){
      for (var i = 0; i < this.tableData2.length; i++) {
          if (this.tableData2[i].id == row.id) {
            this.tableData2.splice(i, 1);
            break
          }
        }
    }

可以看到，动态下拉框的原理很简单，就是将table row展示为目标组件，随后通过row的增减来控制组件的动态变化。本文中只展示了下拉框的动态变化，其它相关组件的动态变化可以参照着整。