快捷導(dǎo)航

Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能

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

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

需求

表單的內(nèi)容為巡檢計(jì)劃，巡檢計(jì)劃可以選擇多個(gè)巡檢點(diǎn)位，每個(gè)巡檢點(diǎn)位可以選擇多個(gè)設(shè)備和對(duì)應(yīng)操作。

最終效果圖

點(diǎn)擊加號(hào)圖標(biāo)增加一個(gè)下拉框
減號(hào)圖標(biāo)刪除對(duì)應(yīng)下拉框
下拉框備選項(xiàng)目相同
點(diǎn)擊設(shè)置動(dòng)作按鈕，彈出可編輯表格，可以為該巡檢點(diǎn)位設(shè)置多個(gè)動(dòng)作

選擇多個(gè)點(diǎn)位

表格每行內(nèi)容可編
設(shè)別名稱下拉框和設(shè)備動(dòng)作下拉框聯(lián)動(dòng)
操作按鈕可對(duì)選項(xiàng)進(jìn)行上下排序

每個(gè)點(diǎn)位選擇單獨(dú)的動(dòng)作

代碼實(shí)現(xiàn)

1.定義表單結(jié)構(gòu)

<el-dialog :title="dialogTitle" :visible.sync="addDialogOpen" width="650px">
   <div class="dialogForm">
     <el-form :rules="rules" :model="addForm" ref="addForm" label-width="80px">	
		精簡了無關(guān)代碼
       <el-form-item label="巡檢內(nèi)容" prop="patrolContent">
         <div class="patrol-content">
           <div class="point">
           patrolContent元素個(gè)數(shù)控制下拉框的個(gè)數(shù)
           循環(huán)渲染
           每個(gè)div中包含一個(gè)下拉框、三個(gè)按鈕
             <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="請選擇巡檢點(diǎn)位(先選擇地圖)">
                   <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)">設(shè)置動(dòng)作
                 </el-button>
               </div>
             </div>
           </div>
         </div>
       </el-form-item>
     </el-form>
   </div>
</el-dialog>

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

addForm: {
  patrolContent: [ //有多少個(gè)元素就渲染多少個(gè)下拉框
    {
      point: '', //點(diǎn)位
      children: [], //對(duì)應(yīng)每個(gè)點(diǎn)位的具體動(dòng)作
    }
  ]
}

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

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

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

4.定義打開動(dòng)作彈窗的函數(shù)

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

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

5.定義動(dòng)作彈窗

在彈窗打開時(shí)，表格會(huì)根據(jù)children中的元素進(jìn)行渲染。

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

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

<el-dialog title="選擇動(dòng)作" :visible.sync="deviceDialogOpen" width="800px">
  <div class="device-dialog">
    <el-table :data="dialogTableData" border>
      <el-table-column align="center" label="序號(hào)" type="index" width="50"/>
      <el-table-column align="center" label="設(shè)備名稱" prop="device">
        <template v-slot="scope">
          <el-select v-show="scope.row.edit" v-model="scope.row.device"
                     class="selectItem"
                     placeholder="選擇設(shè)備"
                     @change="deviceSelectChange">
            <el-option value="機(jī)械臂" label="機(jī)械臂"/>
            <el-option value="升降臺(tái)" label="升降臺(tái)"/>
            <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="設(shè)備動(dòng)作" prop="action">
        <template v-slot="scope">
          <el-select v-show="scope.row.edit"
                     value-key="id"
                     v-model="scope.row.action"
                     class="selectItem"
                     placeholder="選擇動(dòng)作">
            <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.實(shí)現(xiàn)表格項(xiàng)增減方法以及排序方法

// 彈窗-表格中增加一條數(shù)據(jù)
addAction() {
  this.dialogTableData.push({
    device: '', //綁定設(shè)備選項(xiàng)
    action: '', //綁定設(shè)備動(dòng)作選項(xiàng)
    edit: true, // 默認(rèn)可編輯
  })
},
// 彈窗-刪除表格中的一條數(shù)據(jù)
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]);
  }
},

總結(jié)

需要明確嵌套層級(jí)，vue組件要綁定到正確的變量上
為某個(gè)選項(xiàng)增加具體動(dòng)作時(shí)，要獲取到索引，這樣才能根據(jù)索引獲取該選項(xiàng)下的數(shù)據(jù)
選項(xiàng)的增刪和排序都利用了splice()函數(shù)

到此這篇關(guān)于Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單(多個(gè)下拉框組件)的文章就介紹到這了,更多相關(guān)Element Vue動(dòng)態(tài)表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: