vue+Element中table表格實現(xiàn)可編輯(select下拉框)
最近在工作中遇到一個問題，需要在表格中實現(xiàn)數(shù)據(jù)可編輯狀態(tài)，具體情況是需要在單元格里加入下拉框；并且每個下拉框的數(shù)組數(shù)據(jù)是不一樣的，具體是根據(jù)當前行前面數(shù)據(jù)的id查詢而來，前面的是數(shù)據(jù)是動態(tài)生成的，后面的下拉框數(shù)據(jù)也是根據(jù)id動態(tài)生成的，內(nèi)容不同；有點類似于樹形二級狀態(tài)，后面的下拉框數(shù)據(jù)來源并沒有在前面內(nèi)容里，而是另外一個接口查詢，具體操作如下：
HTML代碼：
1.在處理人列加入一個下拉框模板，其中v-model必須要scope.row.proJbruserValue來綁定，意思是這個值綁定到當前行所選中的人；如果直接綁定proJbruserValue，將不能進行差異化選擇，(這里scope.row.proJbruserValue 相當于對象點屬性，在本地臨時添加了一個屬性來存儲不同行的選中處理人id)
2.通過點擊當前行下拉框獲取焦點，根據(jù)當前行id查詢對應的下拉框數(shù)據(jù)，并賦值給data中我們設置的數(shù)組接收，
3.一個重要的注意點，:key=item.id 這個key盡量綁定id，不推薦使用Index, 因為在這里使用Index的時候，會讓選中項出現(xiàn)數(shù)字bug，這是我在坑里呆了好久才通過我的一個朋友得到的答案，具體bug原因尚未深究，請重點注意；
4.最后點擊按鈕提交流程配置；
<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é)點名稱"></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é)點數(shù)據(jù)
projectJbrUserlist: [], // 處理人員數(shù)據(jù)
nodeidlist: [], // 所有流程節(jié)點Id
selectedUserlist: [], // 被選中的處理人員id數(shù)組
}
},
created() {
this.getProcessNodelist();
},
methods: {
// 查詢流程節(jié)點數(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é)點數(shù)據(jù)失敗');
}
this.processNodelist = res.msg;
},
// select下拉框獲取焦點的時候查詢id對應的下拉框數(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é)點配置失敗');
}
this.$message.success('流程節(jié)點配置成功');
},
// 發(fā)起請求
submitConfigHandle() {
// 循環(huán)流程節(jié)點數(shù)組將所有nodeid取出添加到新數(shù)組
for (let i = 0; i < this.processNodelist.length; i++) {
this.nodeidlist.push(this.processNodelist[i].nodeid);
}
// 循環(huán)流程節(jié)點數(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();
}
}這次實現(xiàn)表格可編輯功能（select下拉框），主要有兩個注意點，一是v-model的綁定問題，而是:key的綁定問題；這次我的數(shù)據(jù)接口是通過id返回的不同數(shù)據(jù)源，可以借鑒上面代碼，如果你的（select下拉框）數(shù)據(jù)源是多個接口查詢而來，你需要在通過接口查詢到各個數(shù)據(jù)源，保存到data里面，然后還要做一些改變：
1.將v-for循環(huán)的數(shù)據(jù)改成通過函數(shù)傳遞當前行數(shù)據(jù)（id）:
<el-option v-for="item in getdatalist(scope.row) "> </el-option>
2.通過傳遞過來的id來判斷當前行需要返回的數(shù)據(jù)源；
getdatalist(row) {
const id = row.nodeid;
if ( id === '1') {
return this.data1
} else if (id === '2') {
return this.data2
}
}希望我的方法能給大家一些幫助和思路
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue3 reactive 請求接口數(shù)據(jù)賦值后拿不到的問題及解決方案
這篇文章主要介紹了vue3 reactive 請求接口數(shù)據(jù)賦值后拿不到的問題及解決方案,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章給大家介紹Vue單頁應用如何引用單獨的樣式文件，本文以css文件為例，通過兩種方式給大家介紹的非常詳細，需要的朋友參考下吧2018-03-03
vue中nextTick函數(shù)和react類似實現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue阻止頁面回退的實現(xiàn)方法(瀏覽器適用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家分享介紹了關于動態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細，通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要為大家詳細介紹了vue-pdf實現(xiàn)文件在線預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue3中的watch是一個組合式的API使用時需要引入,下面這篇文章主要給大家介紹了關于vue3下watch使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
vue引入iconfont圖標庫的優(yōu)雅實戰(zhàn)記錄
使用組件庫時,圖標往往不能滿足需求,所以我們常常需要用到第三方圖標庫,這篇文章主要給大家介紹了關于vue引入iconfont的相關資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue框架下引入ActiveX控件的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了Vue3計算屬性是如何實現(xiàn)的，對于任何包含響應式數(shù)據(jù)的復雜邏輯，我們都應該使用計算屬性，更多相關內(nèi)容需要的小伙伴可以參考一下2022-08-08