Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能

更新時間：2023年07月25日 09:51:55 作者：LL金盆

這篇文章主要介紹了Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

需求

表單的內容為巡檢計劃，巡檢計劃可以選擇多個巡檢點位，每個巡檢點位可以選擇多個設備和對應操作。

最終效果圖

點擊加號圖標增加一個下拉框
減號圖標刪除對應下拉框
下拉框備選項目相同
點擊設置動作按鈕，彈出可編輯表格，可以為該巡檢點位設置多個動作

選擇多個點位

表格每行內容可編
設別名稱下拉框和設備動作下拉框聯(lián)動
操作按鈕可對選項進行上下排序

每個點位選擇單獨的動作

代碼實現(xiàn)

1.定義表單結構

<el-dialog :title="dialogTitle" :visible.sync="addDialogOpen" width="650px">
   <div class="dialogForm">
     <el-form :rules="rules" :model="addForm" ref="addForm" label-width="80px">	
		精簡了無關代碼
       <el-form-item label="巡檢內容" prop="patrolContent">
         <div class="patrol-content">
           <div class="point">
           patrolContent元素個數控制下拉框的個數
           循環(huán)渲染
           每個div中包含一個下拉框、三個按鈕
             <div class="point-item"
                  v-for="(item,index) in addForm.patrolContent"
                  :key="index">
               <div class="point-select">
                 <el-select v-model="item.point" class="selectItem" placeholder="請選擇巡檢點位(先選擇地圖)">
                   <el-option v-for="(item,index) in pointOptions"
                              :key="index"
                              :label="item.point_name"
                              :value="item.point_name">
                   </el-option>
                 </el-select>
                 <el-button size="mini" icon="el-icon-circle-plus" type="primary"
                            @click="addPointSelectItem(index)"/>
                 <el-button size="mini" icon="el-icon-remove" type="info"
                            @click="removePointSelectItem(index)"/>
                 <el-button size="mini" type="success"
                            @click="addDeviceAction(index)">設置動作
                 </el-button>
               </div>
             </div>
           </div>
         </div>
       </el-form-item>
     </el-form>
   </div>
</el-dialog>

2.在data()中定義需要綁定的模板變量

addForm: {
  patrolContent: [ //有多少個元素就渲染多少個下拉框
    {
      point: '', //點位
      children: [], //對應每個點位的具體動作
    }
  ]
}

3.定義增減下拉框的方法，實現(xiàn)動態(tài)增減

// 增加一個巡檢點下拉框
addPointSelectItem(index) {
  this.addForm.patrolContent.splice(index + 1, 0,
      {
        point: '',
        children: [] //為空表示該點還未設置動作
      }
  )
},
// 刪除一個巡檢點下拉框
removePointSelectItem(index) {
  if (this.addForm.patrolContent.length > 1) {
    this.addForm.patrolContent.splice(index, 1)
  }
},

至此，已經實現(xiàn)了下拉框的動態(tài)增減，且下拉框的選項之間互不影響。接下來繼續(xù)實現(xiàn)每個點位可以配置不同的動作。

4.定義打開動作彈窗的函數

這里在打開彈窗時，首先獲取到所點擊的下拉框索引值index，index代表了該元素在patrolContent中的位置，通過index獲取表格要綁定的變量（該元素中的children）。

// 在該點位添加動作:打開彈窗
addDeviceAction(index) {
  this.dialogTableData = this.addForm.patrolContent[index].children
  this.deviceDialogOpen = true
}

5.定義動作彈窗

在彈窗打開時，表格會根據children中的元素進行渲染。

表格借助v-if實現(xiàn)了編輯和確認編輯邏輯。

實現(xiàn)表格項的增刪較為簡單，增刪children列表中的元素即可。

<el-dialog title="選擇動作" :visible.sync="deviceDialogOpen" width="800px">
  <div class="device-dialog">
    <el-table :data="dialogTableData" border>
      <el-table-column align="center" label="序號" type="index" width="50"/>
      <el-table-column align="center" label="設備名稱" prop="device">
        <template v-slot="scope">
          <el-select v-show="scope.row.edit" v-model="scope.row.device"
                     class="selectItem"
                     placeholder="選擇設備"
                     @change="deviceSelectChange">
            <el-option value="機械臂" label="機械臂"/>
            <el-option value="升降臺" label="升降臺"/>
            <el-option value="攝像頭" label="攝像頭"/>
          </el-select>
          <span v-show="!scope.row.edit">
            {{ scope.row.device }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="設備動作" prop="action">
        <template v-slot="scope">
          <el-select v-show="scope.row.edit"
                     value-key="id"
                     v-model="scope.row.action"
                     class="selectItem"
                     placeholder="選擇動作">
            <el-option v-for="item in actionOptions"
                       :key="item.label"
                       :value="item.value"
                       :label="item.label">
            </el-option>
          </el-select>
          <span v-show="!scope.row.edit">
            {{ scope.row.action['action_name'] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template v-slot="scope">
          <el-button size="mini" type="primary" v-show="!scope.row.edit" @click="editAction(scope.row)">編輯
          </el-button>
          <el-button size="mini" type="success" v-show="scope.row.edit" @click="scope.row.edit=!scope.row.edit">
            確定
          </el-button>
          <el-button size="mini" type="danger" @click="delAction(scope.$index)">刪除</el-button>
          <el-button size="mini" type="primary" plain @click="upMoveItem(scope.$index)"
                     icon="el-icon-caret-top"></el-button>
          <el-button size="mini" type="warning" plain @click="downMoveItem(scope.$index)"
                     icon="el-icon-caret-bottom"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-button type="warning" @click="addAction">添加</el-button>
      <el-button type="primary" @click="deviceDialogOpen=false">確定</el-button>
    </div>
  </div>
</el-dialog>

6.實現(xiàn)表格項增減方法以及排序方法

// 彈窗-表格中增加一條數據
addAction() {
  this.dialogTableData.push({
    device: '', //綁定設備選項
    action: '', //綁定設備動作選項
    edit: true, // 默認可編輯
  })
},
// 彈窗-刪除表格中的一條數據
delAction(index) {
  this.dialogTableData.splice(index, 1)
},
// 上移元素
upMoveItem(index) {
  let table = this.dialogTableData
  if (index !== 0) {
    table[index] = table.splice(index - 1, 1, table[index])[0]
  } else {
    table.push(table.shift())
  }
},
// 下移元素
downMoveItem(index) {
  let table = this.dialogTableData
  if (index !== table.length - 1) {
    table[index] = table.splice(index + 1, 1, table[index])[0];
  } else {
    table.unshift(table.splice(index, 1)[0]);
  }
},