element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo
更新時間:2023年11月21日 11:13:34 作者:Tom_Li
這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
彈窗回顯勾選的項
關(guān)鍵代碼
// 函數(shù)名叫什么無所謂,函數(shù)的參數(shù)值 data是要回顯表格的所有數(shù)據(jù)
// 數(shù)據(jù)改變放在 this.$nextTick中
handleSelection(data) {
this.$nextTick(() => {
// selectedArr 是所有需要勾選的項的集合
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="序號"
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表格勾選回顯的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue.js+ElementUI實現(xiàn)進(jìn)度條提示密碼強(qiáng)度效果
這篇文章主要介紹了vue.js+ElementUI實現(xiàn)進(jìn)度條提示密碼強(qiáng)度效果,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01

