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

HTML代碼：

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

2.通過點(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，這是我在坑里呆了好久才通過我的一個(gè)朋友得到的答案，具體bug原因尚未深究，請(qǐng)重點(diǎn)注意；

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

<el-table :data='processNodelist' 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ù)接口是通過id返回的不同數(shù)據(jù)源，可以借鑒上面代碼，如果你的（select下拉框）數(shù)據(jù)源是多個(gè)接口查詢而來，你需要在通過接口查詢到各個(gè)數(shù)據(jù)源，保存到data里面，然后還要做一些改變：

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

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

2.通過傳遞過來的id來判斷當(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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。