element UI 2.15.13与vue2.0表格勾选回显关键demo
作者:Tom_Li
这篇文章主要为大家介绍了element UI 2.15.13与vue2.0表格勾选回显关键demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
弹窗回显勾选的项
关键代码
// 函数名叫什么无所谓,函数的参数值 data是要回显表格的所有数据 // 数据改变放在 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('操作成功'); // 触发父组件的刷新 this.$emit('handClose'); } }, // 获取表格的数据 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表格勾选回显关键demo的详细内容,更多关于element UI vue表格勾选回显的资料请关注脚本之家其它相关文章!