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組件實(shí)現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實(shí)現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11vue.js+ElementUI實(shí)現(xiàn)進(jìn)度條提示密碼強(qiáng)度效果
這篇文章主要介紹了vue.js+ElementUI實(shí)現(xiàn)進(jìn)度條提示密碼強(qiáng)度效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01Vue3使用Lottie實(shí)現(xiàn)一個簡單的加載動畫
Lottie 是一個流行的動畫庫,它允許我們使用 JSON 文件來渲染高質(zhì)量的動畫,本文將介紹一下如何在Vue3中集成 Lottie 動畫實(shí)現(xiàn)一個加載動畫效果,需要的可以了解下2025-02-02