el-table 子父是没有联动问题

Question

vue3 js element-plus el-table 有复选框
当数据里存在children时 父子是有联动的 而子父是没有联动的
请问这个是要自己写逻辑吗

https://img-mid.csdnimg.cn/release/static/image/mid/ask/22738191978619.png "#left")

Answer 1

• 你可以看下这个问题的回答https://ask.csdn.net/questions/6073433
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue实现element-table的批量删除
• 除此之外, 这篇博客: Vue使用ElementUI的el-table组件，处理合计行问题中的 1.2 解决方案 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 参考博客：https://blog.csdn.net/lx583274568/article/details/89402874
  方案一：使用trick（亲测）

  //获取数据后，主动调用
   _this.$nextTick().then( ()=> {
          _this.isShowSummary=true;
   })
  

  方案二：使用响应式数据操作方式，达到刷新表格的目的（未测试）

  _this.dataList.push({});
  _this.dataList.pop();
  

  即先通过push一个空对象，再把空对象pop出来的方法，可以实现视图的更新。

• 以下回答由chatgpt基于相关博客总结生成:

  根据提供的参考资料和问题描述，解答如下：

  对于el-table中的父级和子级数据的联动效果，如果el-table的复选框type属性设置为"selection"，则已经提供了默认的父级和子级联动效果，不需要自己编写逻辑实现。

  根据提供的代码和流程，可以看出已经实现了获取勾选的数据和存储到selectUserInfo中。如果需要添加父级和子级联动的效果，可以根据勾选的父级数据获取对应的子级数据，并将子级数据添加到selectUserInfo中。

  示例代码如下：

  export default {
    data() {
      return {
        selectUserInfo: [],
        userList: [
          { _id: '1', username: '张三', age: 20, gender: '男', parentId: null },
          { _id: '2', username: '李四', age: 25, gender: '男', parentId: null },
          { _id: '3', username: '王五', age: 30, gender: '男', parentId: null },
          { _id: '4', username: '赵六', age: 35, gender: '男', parentId: '1' },
          { _id: '5', username: '小七', age: 18, gender: '女', parentId: '2' },
        ],
      };
    },
    methods: {
      // 获取选中的数据
      selectUser(val) {
        this.selectUserInfo = [];
        // 获取勾选的父级数据
        val.forEach((item) => {
          if (item.parentId === null) {
            this.selectUserInfo.push(item._id);
            // 获取对应的子级数据
            const children = this.userList.filter((user) => user.parentId === item._id);
            children.forEach((child) => {
              this.selectUserInfo.push(child._id);
            });
          }
        });
        // 数组去重
        this.selectUserInfo = Array.from(new Set(this.selectUserInfo));
      },
    },
  };
  

  上述代码中，通过遍历勾选的父级数据，获取对应的子级数据，并将子级数据添加到selectUserInfo中，实现了子父级联动的效果。

  关于段落1和段落2的问题，可以通过在表格的样式中去掉鼠标悬停时的高亮效果。

  示例代码如下：

  <el-table :data="userList" style="width: 100%;background-color:transparent;" highlight-current-row>
    ...
  </el-table>
  

  在 el-table 标签中添加 highlight-current-row 属性可以去掉鼠标悬停时的高亮效果，并通过设置表格的背景样式为透明来达到去掉高亮的效果。

  注意：示例代码中的 userList 数据仅作为示例，具体根据实际情况修改。