IT评测·应用市场-qidao123.com

标题: elementplu父级页面怎么使用封装子组件原组件的方法 [打印本页]

---

作者: 小秦哥    时间: 2024-6-21 13:22
标题: elementplu父级页面怎么使用封装子组件原组件的方法
一、使用原因：
封装了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>
18. 2、selectionChange 每行多选方法
19. const companyTable = ref() // 有用1定义的ref
20. selectionChange: (data) => {
21.     tableObj.selectList = data;
22.     let leng = data.length
23.     if(leng > 0){
24.       data.forEach((item,ind)=>{
25.         if(item.contentStatus == '0' || item.contentStatus == '2'){
26.         //******这是重点***********
27.         companyTable.value.$refs.table.toggleRowSelection(data[ind], false);
28.         ElMessage.warning("该文章审核状态不符合发布操作！");
29.         }
30.       })
31.     }
32.    
33.    
34.   },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4