最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue+Element中table表格實(shí)現(xiàn)可編輯(select下拉框)

 更新時(shí)間:2022年04月26日 16:52:35   作者:w小博  
這篇文章主要介紹了vue+Element中table表格實(shí)現(xiàn)可編輯,實(shí)現(xiàn)select下拉框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

最近在工作中遇到一個(gè)問題,需要在表格中實(shí)現(xiàn)數(shù)據(jù)可編輯狀態(tài),具體情況是需要在單元格里加入下拉框;并且每個(gè)下拉框的數(shù)組數(shù)據(jù)是不一樣的,具體是根據(jù)當(dāng)前行前面數(shù)據(jù)的id查詢而來(lái),前面的是數(shù)據(jù)是動(dòng)態(tài)生成的,后面的下拉框數(shù)據(jù)也是根據(jù)id動(dòng)態(tài)生成的,內(nèi)容不同;有點(diǎn)類似于樹形二級(jí)狀態(tài),后面的下拉框數(shù)據(jù)來(lái)源并沒有在前面內(nèi)容里,而是另外一個(gè)接口查詢,具體操作如下:

HTML代碼:

1.在處理人列加入一個(gè)下拉框模板,其中v-model必須要scope.row.proJbruserValue來(lái)綁定,意思是這個(gè)值綁定到當(dāng)前行所選中的人;如果直接綁定proJbruserValue,將不能進(jìn)行差異化選擇,(這里scope.row.proJbruserValue 相當(dāng)于對(duì)象點(diǎn)屬性,在本地臨時(shí)添加了一個(gè)屬性來(lái)存儲(chǔ)不同行的選中處理人id)

2.通過(guò)點(diǎn)擊當(dāng)前行下拉框獲取焦點(diǎn),根據(jù)當(dāng)前行id查詢對(duì)應(yīng)的下拉框數(shù)據(jù),并賦值給data中我們?cè)O(shè)置的數(shù)組接收,

3.一個(gè)重要的注意點(diǎn),:key=item.id 這個(gè)key盡量綁定id,不推薦使用Index, 因?yàn)樵谶@里使用Index的時(shí)候,會(huì)讓選中項(xiàng)出現(xiàn)數(shù)字bug,這是我在坑里呆了好久才通過(guò)我的一個(gè)朋友得到的答案,具體bug原因尚未深究,請(qǐng)重點(diǎn)注意;

4.最后點(diǎn)擊按鈕提交流程配置;

<el-table :data="processNodelist" style="width: 100%" border stripe>
 <el-table-column type="index" label="序號(hào)" width="50"></el-table-column>
 <el-table-column prop="nodename" label="流程節(jié)點(diǎn)名稱"></el-table-column>
 <el-table-column label="處理人名稱">
 <template slot-scope="scope">
 <el-select v-model="scope.row.proJbruserValue" @focus="getDatalist(scope.row)" placeholder="請(qǐng)選擇" filterable allow-create>
 <el-option v-for="item in projectJbrUserlist " :key="item.id" :label="item.username" :value="item.id">
 </el-option>
 </el-select>
 </template>
 </el-table-column>
</el-table>
<el-button @click="submitConfigHandle" type="primary" size="mini" icon="el-icon-upload">提交配置</el-button>

js邏輯代碼:

data() {
 return {
  processNodelist: [], // 流程節(jié)點(diǎn)數(shù)據(jù)
  projectJbrUserlist: [], // 處理人員數(shù)據(jù)
  nodeidlist: [], // 所有流程節(jié)點(diǎn)Id
  selectedUserlist: [], // 被選中的處理人員id數(shù)組
 }
},
created() {
 this.getProcessNodelist();
},
methods: {
 // 查詢流程節(jié)點(diǎn)數(shù)據(jù)
  async getProcessNodelist() {
   const { data: res } = await this.$http.post('querynode', {
    userid: this.sessionInfo.userid,
    sid: this.sessionInfo.session,
    developerid: this.sessionInfo.companyId
   });
   if (res.code !== 0) {
    return this.$message.error('獲取流程節(jié)點(diǎn)數(shù)據(jù)失敗');
   }
   this.processNodelist = res.msg;
  },
  // select下拉框獲取焦點(diǎn)的時(shí)候查詢id對(duì)應(yīng)的下拉框數(shù)據(jù)源
  async getDatalist(row) {
   const { data: res } = await this.$http.post('query', {
    userid: this.sessionInfo.userid,
    sid: this.sessionInfo.session,
    queryid: 9,
    nodeid: row.nodeid
   });
   if (res.code !== 0) {
    return this.$message.error('獲取處理人數(shù)據(jù)失敗');
   }
   this.projectJbrUserlist = res.msg;
  },
  // 提交流程配置接口
  async submitConfig() {
   const { data: res } = await this.$http.post('bindTask', {
    userid: this.sessionInfo.userid,
    sid: this.sessionInfo.session,
    flowid: 9,
    table_name: 'pt_base',
    key_value: this.sessionInfo.proId,
    nodeid: this.nodeidlist,
    uid: this.selectedUserlist
   });
   if (res.code !== 0) {
    return this.$message.error('流程節(jié)點(diǎn)配置失敗');
   }
   this.$message.success('流程節(jié)點(diǎn)配置成功');
  },
  // 發(fā)起請(qǐng)求
  submitConfigHandle() {
   // 循環(huán)流程節(jié)點(diǎn)數(shù)組將所有nodeid取出添加到新數(shù)組
   for (let i = 0; i < this.processNodelist.length; i++) {
    this.nodeidlist.push(this.processNodelist[i].nodeid);
   }
   // 循環(huán)流程節(jié)點(diǎn)數(shù)組將所有被選擇的處理人員id :proJbruserValue取出添加到新數(shù)組
   for (let i = 0; i < this.processNodelist.length; i++) {
    this.selectedUserlist.push(
     this.processNodelist[i].proJbruserValue
    );
   }
   // 調(diào)用接口函數(shù)
   this.submitConfig();
  }
}

這次實(shí)現(xiàn)表格可編輯功能(select下拉框),主要有兩個(gè)注意點(diǎn),一是v-model的綁定問題,而是:key的綁定問題;這次我的數(shù)據(jù)接口是通過(guò)id返回的不同數(shù)據(jù)源,可以借鑒上面代碼,如果你的(select下拉框)數(shù)據(jù)源是多個(gè)接口查詢而來(lái),你需要在通過(guò)接口查詢到各個(gè)數(shù)據(jù)源,保存到data里面,然后還要做一些改變:

1.將v-for循環(huán)的數(shù)據(jù)改成通過(guò)函數(shù)傳遞當(dāng)前行數(shù)據(jù)(id):

<el-option v-for="item in getdatalist(scope.row) "> </el-option>

2.通過(guò)傳遞過(guò)來(lái)的id來(lái)判斷當(dāng)前行需要返回的數(shù)據(jù)源;

getdatalist(row) {
 const id = row.nodeid;
 if ( id === '1') {
  return this.data1 
 } else if (id === '2') {
  return this.data2
 }
}

希望我的方法能給大家一些幫助和思路

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論

宁波市| 瑞安市| 凌云县| 阿图什市| 鄂州市| 莆田市| 噶尔县| 沁源县| 忻州市| 湖口县| 合川市| 赞皇县| 浮山县| 福泉市| 苍溪县| 平安县| 高陵县| 日土县| 吴江市| 西宁市| 兴山县| 黄陵县| 南昌县| 石楼县| 门源| 安岳县| 灌南县| 武汉市| 无锡市| 板桥市| 开封市| 西藏| 泸州市| 澎湖县| 苍山县| 鄂伦春自治旗| 湘乡市| 涿鹿县| 鹰潭市| 安阳市| 通渭县|