vue+Element中table表格實(shí)現(xiàn)可編輯(select下拉框)
最近在工作中遇到一個問題,需要在表格中實(shí)現(xiàn)數(shù)據(jù)可編輯狀態(tài),具體情況是需要在單元格里加入下拉框;并且每個下拉框的數(shù)組數(shù)據(jù)是不一樣的,具體是根據(jù)當(dāng)前行前面數(shù)據(jù)的id查詢而來,前面的是數(shù)據(jù)是動態(tài)生成的,后面的下拉框數(shù)據(jù)也是根據(jù)id動態(tài)生成的,內(nèi)容不同;有點(diǎn)類似于樹形二級狀態(tài),后面的下拉框數(shù)據(jù)來源并沒有在前面內(nèi)容里,而是另外一個接口查詢,具體操作如下:
HTML代碼:
1.在處理人列加入一個下拉框模板,其中v-model必須要scope.row.proJbruserValue來綁定,意思是這個值綁定到當(dāng)前行所選中的人;如果直接綁定proJbruserValue,將不能進(jìn)行差異化選擇,(這里scope.row.proJbruserValue 相當(dāng)于對象點(diǎn)屬性,在本地臨時添加了一個屬性來存儲不同行的選中處理人id)
2.通過點(diǎn)擊當(dāng)前行下拉框獲取焦點(diǎn),根據(jù)當(dāng)前行id查詢對應(yīng)的下拉框數(shù)據(jù),并賦值給data中我們設(shè)置的數(shù)組接收,
3.一個重要的注意點(diǎn),:key=item.id 這個key盡量綁定id,不推薦使用Index, 因?yàn)樵谶@里使用Index的時候,會讓選中項(xiàng)出現(xiàn)數(shù)字bug,這是我在坑里呆了好久才通過我的一個朋友得到的答案,具體bug原因尚未深究,請重點(diǎn)注意;
4.最后點(diǎn)擊按鈕提交流程配置;
<el-table :data="processNodelist" style="width: 100%" border stripe> <el-table-column type="index" label="序號" 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="請選擇" 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)的時候查詢id對應(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ā)起請求 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下拉框),主要有兩個注意點(diǎn),一是v-model的綁定問題,而是:key的綁定問題;這次我的數(shù)據(jù)接口是通過id返回的不同數(shù)據(jù)源,可以借鑒上面代碼,如果你的(select下拉框)數(shù)據(jù)源是多個接口查詢而來,你需要在通過接口查詢到各個數(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 } }
希望我的方法能給大家一些幫助和思路
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3 reactive 請求接口數(shù)據(jù)賦值后拿不到的問題及解決方案
這篇文章主要介紹了vue3 reactive 請求接口數(shù)據(jù)賦值后拿不到的問題及解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04Vue單頁應(yīng)用引用單獨(dú)的樣式文件的兩種方式
這篇文章給大家介紹Vue單頁應(yīng)用如何引用單獨(dú)的樣式文件,本文以css文件為例,通過兩種方式給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-03-03vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實(shí)現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實(shí)現(xiàn)代碼,需要的朋友可以參考下2024-04-04vue阻止頁面回退的實(shí)現(xiàn)方法(瀏覽器適用)
這篇文章主要介紹了vue阻止頁面回退的實(shí)現(xiàn)方法(瀏覽器適用),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05vue-pdf實(shí)現(xiàn)文件在線預(yù)覽
這篇文章主要為大家詳細(xì)介紹了vue-pdf實(shí)現(xiàn)文件在線預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08vue引入iconfont圖標(biāo)庫的優(yōu)雅實(shí)戰(zhàn)記錄
使用組件庫時,圖標(biāo)往往不能滿足需求,所以我們常常需要用到第三方圖標(biāo)庫,這篇文章主要給大家介紹了關(guān)于vue引入iconfont的相關(guān)資料,需要的朋友可以參考下2021-06-06