elementplu父级页面怎么使用封装子组件原组件的方法

一、使用原因:

封装了el-table,表格中有多选,父级要根据指定状态,让其选择不上,需要用到elementplus中table原方法toggleRowSelection

附加小知识点:(el-tree刷新树后之前选中的保持高亮setCurrentKey:orgnTreeDom.value.$refs.tree.setCurrentKey(treeObj.checkedKey);)

二、效果图:

三、代码结构

1、el-table封装的组件:

2、父级使用封装el-table结构部分

javascript 复制代码
父级使用封装el-table结构部分代码
1、结构
 <scada-table
        ref="companyTable" // 有用1
        index
        selection // 有用2
        maxHeight="60vh"
        :loading="tableObj.loading"
        :column-option="tableObj.columnOption"
        :table-data="tableObj.tableData"
        :pageData="tableObj.pageData"
        @currentChange="tableObj.currentChange"
        @sizeChange="tableObj.sizeChange"
        @selectionChange="tableObj.selectionChange" // 有用3
      >
      </scada-table>

2、selectionChange 每行多选方法
const companyTable = ref() // 有用1定义的ref
selectionChange: (data) => {
    tableObj.selectList = data;
    let leng = data.length
    if(leng > 0){
      data.forEach((item,ind)=>{
        if(item.contentStatus == '0' || item.contentStatus == '2'){
        //******这是重点***********
        companyTable.value.$refs.table.toggleRowSelection(data[ind], false);
        ElMessage.warning("该文章审核状态不符合发布操作!");
        }
      })
    }
    
    
  },
相关推荐
wkj0012 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey6 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an7 小时前
html语法
前端·html
张拭心7 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
烛阴7 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
@大迁世界8 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
红尘散仙8 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
mldong8 小时前
mldong-goframe:基于 GoFrame + Vben5 的全栈快速开发框架正式开源!
vue.js·后端·go
新酱爱学习8 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
袁煦丞9 小时前
把纸堆变数据流!Paperless-ngx让文件管理像打游戏一样爽:cpolar内网穿透实验室第539个成功挑战
前端·程序员·远程工作