vue el-table實(shí)現(xiàn)多選框回填的示例代碼
更新時(shí)間：2024年01月15日 11:30:33 作者：guochanof
摘要：Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見(jiàn)需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
主要代碼:
//選中列，所有列，表名
toggleSelection(selectRows, totalRows, tablename) {
this.$refs.table.clearSelection();
if (selectRows.length > 0) {
this.$nextTick(() => {
selectRows.forEach(item => {
totalRows.forEach(item1 => {
if (item.userId == item1.userId) {
this.$refs.table.toggleRowSelection(item1);
}
});
});
});
}
},效果:
html
<!-- 添加或修改對(duì)話框 -->
<el-dialog :title="title" :visible.sync="open" width="880px" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="add">
<el-form-item label="分組名稱(chēng)" prop="nums">
<el-input v-model="form.nums" placeholder="請(qǐng)輸分組名稱(chēng)" />
</el-form-item>
<el-form-item label="人員" prop="names">
<el-input v-model="form.names" type="textarea" style="width:500px" />
<el-input v-model="form.userIds" type="textarea" style="width:500px" />
<el-button type="primary" plain size="mini" @click="selectProject" style="margin-left:20px">人員選擇</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 項(xiàng)目選擇 -->
<el-dialog title="選擇人員" :visible.sync="projectOpen" width="1000px" :append-to-body="true" @close="cancelSelsectProject" :close-on-click-modal="false">
<el-form :model="projectQueryParams" ref="projectQueryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="部門(mén)" prop="deptId">
<el-select v-model="projectQueryParams.deptId" filterable clearable placeholder="請(qǐng)選擇部門(mén)">
<el-option v-for="item in deptOptions" :key="item.id" :label="item.label" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名" prop="nickName">
<el-input v-model="projectQueryParams.nickName" placeholder="姓名" clearable />
</el-form-item>
<el-form-item label="編制" prop="name">
<el-select v-model="projectQueryParams.value" placeholder="請(qǐng)選擇">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="projectHandleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="projectResetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="projectList" ref="table" @row-click="projectSelectRow" @selection-change="handleSelectionChange" :row-key="row=>row.userId" :highlight-current-row="true" @cell-dblclick="dblclickRow(row)" border>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="部門(mén)" align="center" prop="dept.deptName" />
<el-table-column label="姓名" align="center" prop="nickName" />
<el-table-column label="編制" align="center" prop="types" />
</el-table>
<pagination v-show="projectTotal > 0" :total="projectTotal" :page.sync="projectQueryParams.pageNum" :limit.sync="projectQueryParams.pageSize" @pagination="getProjectList" />
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitSelectProject">確 定</el-button>
<el-button @click="cancelSelsectProject">取 消</el-button>
</div>
</el-dialog>js
// 多選框選中數(shù)據(jù)
handleSelectionChange(selection) {
this.projectRow = selection;
this.ids = selection.map(item => item.userId);
this.names = selection.map(item => item.nickName);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
//打開(kāi)項(xiàng)目選擇彈窗
selectProject() {
this.projectOpen = true;
this.getProjectList();
},
/** 查詢(xún)項(xiàng)目列表 */
getProjectList() {
this.loading = true;
let rows = this.projectRow;
listUser(this.projectQueryParams).then(response => {
this.projectList = response.rows;
this.projectTotal = response.total;
let selectRows = this.projectRow;
let totalRows = response.rows;
this.loading = false;
this.toggleSelection(selectRows, totalRows);
});
},
//選中列，所有列，表名
toggleSelection(selectRows, totalRows, tablename) {
this.$refs.table.clearSelection();
if (selectRows.length > 0) {
this.$nextTick(() => {
selectRows.forEach(item => {
totalRows.forEach(item1 => {
if (item.userId == item1.userId) {
this.$refs.table.toggleRowSelection(item1);
}
});
});
});
}
},到此這篇關(guān)于vue el-table實(shí)現(xiàn)多選框回填的示例代碼的文章就介紹到這了,更多相關(guān)vue el-table多選框回填內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
插件功能開(kāi)發(fā)完成后，若需要發(fā)布到公共組件庫(kù)中（例如：npmjs），需要對(duì)插件進(jìn)行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下2018-08-08
使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法
這篇文章主要介紹了使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue函數(shù)式組件及vue函數(shù)式組件的優(yōu)缺點(diǎn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vite打包去除console.log和debugge的方法實(shí)踐
本文主要介紹了vite打包去除console.log和debugge的方法實(shí)踐,vite 已經(jīng)將這個(gè)功能內(nèi)置了,所以我們只需要修改配置文件,下面就來(lái)介紹一下如何修改2023-12-12
vue導(dǎo)出html、word和pdf的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue導(dǎo)出html、word和pdf的實(shí)現(xiàn)方法，文中完成了三種文件的導(dǎo)出但是還有很多種方法，小編就不給大家一一列舉了,需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了vite插件打包更順暢的使用技巧示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue2.x中keep-alive源碼解析(實(shí)例代碼)
Keep-Alive模式避免頻繁創(chuàng)建、銷(xiāo)毀鏈接，允許多個(gè)請(qǐng)求和響應(yīng)使用同一個(gè)HTTP鏈接，這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下
2023-02-02 
vue項(xiàng)目打包后網(wǎng)頁(yè)的title亂碼解決方案
這篇文章主要介紹了vue項(xiàng)目打包后網(wǎng)頁(yè)的title亂碼解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03 
Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器全面詳細(xì)講解
這篇文章主要介紹了Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-01-01