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

打印 上一主题 下一主题

主题 541|帖子 541|积分 1623

一、使用原因:
封装了el-table,表格中有多选,父级要根据指定状态,让其选择不上,须要用到elementplus中table原方法toggleRowSelection
附加小知识点:(el-tree刷新树后之前选中的保持高亮setCurrentKey:orgnTreeDom.value.$refs.tree.setCurrentKey(treeObj.checkedKey);)
二、结果图:

三、代码结构
1、el-table封装的组件:

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

  1. 父级使用封装el-table结构部分代码
  2. 1、结构
  3. <scada-table
  4.         ref="companyTable" // 有用1
  5.         index
  6.         selection // 有用2
  7.         maxHeight="60vh"
  8.         :loading="tableObj.loading"
  9.         :column-option="tableObj.columnOption"
  10.         :table-data="tableObj.tableData"
  11.         :pageData="tableObj.pageData"
  12.         @currentChange="tableObj.currentChange"
  13.         @sizeChange="tableObj.sizeChange"
  14.         @selectionChange="tableObj.selectionChange" // 有用3
  15.       >
  16.       </scada-table>
  17. 2、selectionChange 每行多选方法
  18. const companyTable = ref() // 有用1定义的ref
  19. selectionChange: (data) => {
  20.     tableObj.selectList = data;
  21.     let leng = data.length
  22.     if(leng > 0){
  23.       data.forEach((item,ind)=>{
  24.         if(item.contentStatus == '0' || item.contentStatus == '2'){
  25.         //******这是重点***********
  26.         companyTable.value.$refs.table.toggleRowSelection(data[ind], false);
  27.         ElMessage.warning("该文章审核状态不符合发布操作!");
  28.         }
  29.       })
  30.     }
  31.    
  32.    
  33.   },
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

小秦哥

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表