快捷導(dǎo)航

el-element中el-table表格嵌套el-select實(shí)現(xiàn)動態(tài)選擇對應(yīng)值功能

更新時(shí)間：2023年01月15日 14:46:33 作者：咩咩可以很溫柔

這篇文章主要給大家介紹了關(guān)于el-element中el-table表格嵌套el-select實(shí)現(xiàn)動態(tài)選擇對應(yīng)值功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

先看問題還原圖：

問題描述：

小編在做需求時(shí)，遇到了在el-table表格中加入多條數(shù)據(jù)，并且每條數(shù)據(jù)要通過el-select來選取相應(yīng)的值，做到動態(tài)選擇。

解決方法：

思路：

最開始，小編的實(shí)現(xiàn)效果是左邊紅色框的效果，選擇其中一個(gè)時(shí)，其他的也對應(yīng)賦值。
主要是因?yàn)閑l-option的選項(xiàng)都是相同的，v-model 的值也是相同的。
那讓每一條 v-model 的值不同不就好了么??！

代碼：

html中代碼：

<el-table-column label="文檔類別" prop="categoryName">
  <template slot-scope="scope">
    <el-select
      :ref="'categoryName' + scope.$index"
      v-model="tableData[scope.$index]['categoryName']"
      placeholder="請選擇文檔類別"
      clearable
    >
      <el-option :value="tableData[scope.$index]['categoryName']" style="height: auto">
        <el-tree
          :ref="'categoryNameTree' + scope.$index"
          :data="typeList"
          node-key="id"
          :props="typeTreeProps"
          @node-click="getTypeList(scope.$index)"
        >
          <span slot-scope="{ node }">{{ node.label }}</span>
        </el-tree>
      </el-option>
    </el-select>
  </template>
</el-table-column>

代碼解說：

在 < el-table > 中綁定數(shù)據(jù) :data="tableData" tableData 為數(shù)組
el-select中

scope.$index ----- 為tableData中每條數(shù)據(jù)的下標(biāo)
:ref="'categoryName' + scope.$index" ----- 設(shè)置 ref ，用戶選擇完值后 el-option 自動隱藏
v-model="tableData[scope.$index]['categoryName']" ----- 綁定動態(tài)的 v-model ，很重要。要注意的是 tableData[scope.$index] 是通過下標(biāo)找當(dāng)數(shù)組tableData中當(dāng)前選擇的數(shù)據(jù)。而這個(gè) categoryName 參數(shù)必須是數(shù)組 tableData 中存在的。

el-option中

:value="tableData[scope.$index]['categoryName']" ----- 與 v-model 相同，綁定動態(tài)值

el-tree中

:ref="'categoryNameTree' + scope.$index" ----- 與 el-select 中 ref 相同
@node-click="getTypeList(scope.$index)" ----- 選擇數(shù)據(jù)時(shí)觸發(fā)，傳當(dāng)前元素的下標(biāo)

data中：

data() {
   return {
     tableData: []  // 接口返回的數(shù)據(jù)，:data綁定在el-table中 
     typeList: [], // 接口返回的數(shù)據(jù)，展現(xiàn)在el-option中，用el-tree包裹
     typeTreeProps: {
       children: 'children',
       label: 'name'
     },
     categoryName: ''
   }
 }

methods中：

getTypeList(index) {
   // .getCurrentKey()獲取到當(dāng)前要選擇節(jié)點(diǎn)的key值
   // 使用此方法必須設(shè)置 node-key 屬性，若沒有節(jié)點(diǎn)被選中則返回 null
  const nodeId = this.$refs['categoryNameTree' + index].getCurrentKey()
   // .getNode(nodeId) 根據(jù) data 或者 key 拿到 Tree 組件中的 node
  const node = this.$refs['categoryNameTree' + index].getNode(nodeId)
   // 根據(jù)index給當(dāng)前元素的categoryName參數(shù)賦值
  this.$set(this.tableData[index], 'categoryName', node.label)
  this.$set(this.tableData[index], 'categoryNo', node.data.docTypeNo)
   // 此時(shí)頁面上已經(jīng)可以動態(tài)選擇
   // 這一步是通過判斷當(dāng)前元素的v-model是否有值來控制el-option是否隱藏
  if (this.tableData[index].categoryName) {
     // .blur()用來隱藏當(dāng)前展開的下拉選擇框
    this.$refs['categoryName' + index].blur()
  }
},

this.$refs['categoryName' + index] 設(shè)置動態(tài)是因?yàn)?，在有多條數(shù)據(jù)時(shí)，如果不是動態(tài)的，但凡有沒有值的選擇框，就不會觸發(fā)。而這樣就可以通過index來判斷隱藏那條元素。

總結(jié)：

遇到新的問題就會有新的知識增加，其實(shí)入職后有很多很多值得學(xué)習(xí)，并且記住的知識，但都因年底的原因，項(xiàng)目要保證封版后bug都解決掉而忙忘掉，翻回來去想記錄的時(shí)候又不從下手。

到此這篇關(guān)于el-element中el-table表格嵌套el-select實(shí)現(xiàn)動態(tài)選擇對應(yīng)值功能的文章就介紹到這了,更多相關(guān)el-table表格動態(tài)選擇對應(yīng)值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: