element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo
彈窗回顯勾選的項(xiàng)
關(guān)鍵代碼
// 函數(shù)名叫什么無(wú)所謂,函數(shù)的參數(shù)值 data是要回顯表格的所有數(shù)據(jù)
// 數(shù)據(jù)改變放在 this.$nextTick中
handleSelection(data) {
this.$nextTick(() => {
// selectedArr 是所有需要勾選的項(xiàng)的集合
const selectedArr = data.filter(item => item.userId);
selectedArr.forEach(item => {
this.$refs.multipleTable.toggleRowSelection(item);
});
});
},完整代碼
<template>
<div class="base_table">
<el-table
ref="multipleTable"
:data="tableData"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="序號(hào)"
type="index"
:index="indexMethod"
width="60">
</el-table-column>
</el-table>
<el-row :gutter="20">
<el-col
:span="12"
:offset="6"
><div class="grid-content">
<el-button @click="$emit('handClose')">取消</el-button>
<el-button
type="primary"
@click="submit"
>確定</el-button
>
</div></el-col
>
</el-row>
</div>
</template>
<script>
export default {
name: 'base-table',
props: {
staffRow: {
default: {},
},
},
data() {
return {
loading: false,
tableData: [],
};
},
mounted() {
this.form = { ...this.form, ...this.staffRow };
this.getJobList();
},
methods: {
indexMethod(index) {
return index + 1;
},
// 提交改變
async submit() {
this.loading = false;
const url = '/user/info';
const { code } = await this.$axios.post(url, {
id: this.$props.staffRow.id,
});
this.loading = true;
if (code === 200) {
this.$message.success('操作成功');
// 觸發(fā)父組件的刷新
this.$emit('handClose');
}
},
// 獲取表格的數(shù)據(jù)
async getJobList() {
let url = '/user/getInfo';
let { code, data } = await this.$axios.get(url, {
id: this.$props.staffRow.id,
});
if (code === 200 && data) {
this.tableData = data.records || [];
this.handleSelection(data.records);
}
},
handleSelection(data) {
this.$nextTick(() => {
const selectedArr = data.filter(item => item.userId);
selectedArr.forEach(item => {
this.$refs.multipleTable.toggleRowSelection(item);
});
});
},
},
};
</script>
<style lang="scss" scoped>
.base_table {
height: 100%;
}
</style>以上就是element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo的詳細(xì)內(nèi)容,更多關(guān)于element UI vue表格勾選回顯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法
本篇文章主要介紹了vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue3中實(shí)現(xiàn)Chart.js柱狀圖的超詳細(xì)指南
柱狀圖是比較常用的圖形結(jié)構(gòu),下面這篇文章主要介紹了Vue3中實(shí)現(xiàn)Chart.js柱狀圖的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
Vue3造輪子之Typescript配置highlight過(guò)程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vite.config配置alias Error: ENOTEMPTY: director
這篇文章主要為大家介紹了vite.config配置alias時(shí)報(bào)錯(cuò):Error: ENOTEMPTY: directory not empty, rmdir解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
Vue3實(shí)現(xiàn)全局自動(dòng)大寫(xiě)轉(zhuǎn)換的兩種方案
本文介紹了在Vue項(xiàng)目中使輸入框內(nèi)容自動(dòng)轉(zhuǎn)為大寫(xiě)的兩種方案:一種是自定義指令v-input-uppercase,適用于對(duì)特定輸入框進(jìn)行精細(xì)化控制;另一種是全局插件,適用于全站所有輸入框,推薦使用,兩種方案均能處理中文輸入法兼容問(wèn)題,合并成一個(gè)插件可同時(shí)實(shí)現(xiàn)兩個(gè)功能2026-04-04
elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問(wèn)題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的問(wèn)題,主要問(wèn)題就是因?yàn)閒ilterable屬性,根本解決方案是選中的時(shí)候讓他失去焦點(diǎn)?el-select有一個(gè)visible-change事件,下拉框出現(xiàn)/隱藏時(shí)觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01
vue.js實(shí)現(xiàn)的綁定class操作示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的綁定class操作,結(jié)合實(shí)例形式分析了vue.js綁定class常見(jiàn)的3種操作技巧,需要的朋友可以參考下2018-07-07
Vue 多層組件嵌套二種實(shí)現(xiàn)方式(測(cè)試實(shí)例)
本篇文章主要介紹了Vue組件嵌套二種實(shí)現(xiàn)方式(測(cè)試實(shí)例),具有一定的參考價(jià)值,代碼很簡(jiǎn)單,感興趣的小伙伴們可以參考一下2017-09-09
vue使用event.dataTransfer實(shí)現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式
這篇文章主要介紹了vue使用event.dataTransfer實(shí)現(xiàn)A容器數(shù)據(jù)拖拽復(fù)制到B容器方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-02-02
Vue如何實(shí)現(xiàn)u-form多個(gè)form表單同時(shí)校驗(yàn)
在 Vue 項(xiàng)目中使用 UView UI 的 u-form 組件時(shí),多個(gè)表單同時(shí)校驗(yàn)的需求非常常見(jiàn),本文主要介紹了如何使用 u-form 組件實(shí)現(xiàn)多個(gè)表單同時(shí)校驗(yàn),需要的可以參考一下2025-01-01

