树状表格父节点选择 - 在Vue.js中实现仅选择父节点的树状表格功能

于 2023-08-25 16:48:11 发布
阅读量802 收藏 3
点赞数 3
分类专栏： 前端 文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51588894/article/details/132498002
版权

功能介绍

        本文介绍了如何在Vue.js框架下实现一个树状表格，其中只支持选择父节点的复选框。通过这个功能，用户可以方便地选择表格中的父节点，而无需关心子节点的选择。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。        

示例

代码

视图部分

<template>
  <div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children' }">
      <el-table-column width="60" align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox :indeterminate="isIndeterminate" v-model="isFullChecked" @change="checkAllChange">
          </el-checkbox>
        </template>
        <template slot-scope="{row}" v-if="row.children">
          <el-checkbox :indeterminate="row.isIndeterminate" :value="row.checked" @change="checkRowChange(row)">
          </el-checkbox>
        </template>
      </el-table-column>

      <el-table-column prop="series" label="系列" align="center"></el-table-column>
      <el-table-column prop="num" label="编号" align="center"></el-table-column>
      <el-table-column prop="name" label="名字" align="center"></el-table-column>
    </el-table>
  </div>
</template>

        表格的容器<el-table>标签。下面是该标签的一些属性和绑定：

  • v-loading="loading"：通过loading属性控制表格的加载状态.
  • :data="tableData"：表格数据通过tableData属性进行绑定.
  • style="width: 100%;margin: 20px;"：设置表格容器的宽度和外边距样式.
  • row-key="id"：指定表格行的唯一标识字段为id属性.
  • border：显示表格边框.
  • default-expand-all：默认展开所有的表格行.
  • :tree-props="{ children: 'children' }"：指定表格数据按照树状结构展示，其中子节点字段为children属性.

        第一个列是一个宽度为60的居中列，该列包含一个复选框。复选框的状态通过isFullChecked和isIndeterminate属性进行控制。在表头的部分，我们使用了一个插槽（slot="header"），并在插槽的内容中放置了一个全选的复选框（<el-checkbox>）。这样，当全选复选框的状态发生改变时，会触发checkAllChange方法。

        接下来，使用了一个作用域插槽（Scoped Slot）来渲染每一行数据的复选框。我们在属性绑定部分使用了slot-scope="scope"来引用插槽的作用域对象，这里命名为scope，并从scope中获取到当前渲染行的数据对象（row）。在插槽的内容中，我们判断row是否有子节点（v-if="row.children"），如果有子节点，则渲染一个复选框（<el-checkbox>）。复选框的状态同样通过row对象的属性进行控制，其中isIndeterminate表示不确定状态，checked表示选中状态。当复选框的状态发生变化时，会触发checkRowChange方法。

逻辑部分        

组件的数据:        

 data() {
    return {
      isFullChecked: false,
      isIndeterminate: false,
      loading: true,
      tableData: []
    }
  }
  • isFullChecked表示全选复选框的状态，默认为false。
  • isIndeterminate表示全选复选框的不确定状态，默认为false。
  • loading表示表格的加载状态，默认为true。
  • tableData表示表格的数据，初始时为空数组。

        在mounted()生命周期钩子中，调用了getList()方法来初始化表格数据：

 mounted() {
    this.getList()
  }

     getList()方法用于获取表格数据。在示例代码中，我们假设数据通过服务端接口获取，并将数据赋值给tableData属性。然后遍历tableData数组，为每个数据项添加checked和isIndeterminate属性，并初始化为false。最后，设置loading为false，用于结束加载状态。

 getList() {
      const tableData = [
        {
          id: 1,
          series: 'DDLC',
          children: [
            {
              id: 11,
              num: '1',
              name: 'monika',
              index: 0,
            },
            {
              id: 12,
              num: '2',
              name: 'nasuki',
              index: 1,
            },
            {
              id: 13,
              num: '3',
              name: 'sayori',
              index: 2,
            },
            {
              id: 14,
              num: '4',
              name: 'yuri',
              index: 3,
            }
          ]
        },
        {
          id: 2,
          series: 'Bloom Into You',
          children: [
            {
              id: 21,
              num: '11',
              name: 'nanami',
              index: 0,
            },
            {
              id: 22,
              num: '12',
              name: 'yuu',
              index: 1,
            }
          ]
        },
      ];
      tableData.forEach(item => {
        item.checked = false;
        item.isIndeterminate = false;
      })
      this.tableData = tableData;
      this.total = this.tableData.length;
      this.loading = false;
    },

     watch属性，用来监听tableData属性的变化。当tableData发生变化时，会触发该监听函数。在这个监听函数中，我们将isFullChecked和isIndeterminate的状态重置为false，以确保全选复选框的状态正确更新：

 watch: {
    tableData() {
      this.isFullChecked = false;
      this.isIndeterminate = false;
    }
  }

        methods对象，定义了一些方法：

  • checkAllChange()方法用于处理全选复选框状态的改变。该方法首先定义了一个递归函数recursionSetChecked(item, checked)，用于设置数据项的checked状态和isIndeterminate状态。然后，通过遍历tableData数组，调用recursionSetChecked(item, this.isFullChecked)方法来设置每个数据项的状态。最后，设置isIndeterminate为false。
checkAllChange() {
      const recursionSetChecked = (item, checked) => {
        item.checked = checked;
        item.isIndeterminate = false;
      }
      this.isIndeterminate = false;
      this.tableData.forEach(item => recursionSetChecked(item, this.isFullChecked));
    }
  • checkRowChange(data)方法用于处理单个行复选框状态的改变。该方法首先切换数据项的checked状态，并定义了一个递归函数recursion(node)来处理子节点的isIndeterminate状态。接着，遍历tableData数组，调用recursion(item)方法来对每个节点进行处理。最后，根据表格数据的选中状态来更新全选复选框的状态（isFullChecked）和半选状态（isIndeterminate）。
  checkRowChange(data) {
      data.checked = !data.checked;
      const recursion = node => {
        if (node.children && node.children.length > 0)
          node.isIndeterminate = false;
        return node;
      };
      this.tableData.forEach(item => recursion(item));

      if (this.tableData.every(item => item.checked)) {
        this.isFullChecked = true;
      }
      else if (this.tableData.every(item => !item.checked)) {
        this.isFullChecked = false;
      }

      this.isIndeterminate = this.tableData.some(item => item.isIndeterminate)
        ? true
        : this.tableData.some(item => !item.checked) && this.tableData.some(item => item.checked);
    }

完整代码

<template>
  <div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children' }">
      <el-table-column width="60" align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox :indeterminate="isIndeterminate" v-model="isFullChecked" @change="checkAllChange">
          </el-checkbox>
        </template>
        <template slot-scope="{row}" v-if="row.children">
          <el-checkbox :indeterminate="row.isIndeterminate" :value="row.checked" @change="checkRowChange(row)">
          </el-checkbox>
        </template>
      </el-table-column>

      <el-table-column prop="series" label="系列" align="center"></el-table-column>
      <el-table-column prop="num" label="编号" align="center"></el-table-column>
      <el-table-column prop="name" label="名字" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullChecked: false,
      isIndeterminate: false,
      loading: true,
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  watch: {
    tableData() {
      this.isFullChecked = false;
      this.isIndeterminate = false;
    }
  },
  methods: {
    getList() {
      const tableData = [
        {
          id: 1,
          series: 'DDLC',
          children: [
            {
              id: 11,
              num: '1',
              name: 'monika',
              index: 0,
            },
            {
              id: 12,
              num: '2',
              name: 'nasuki',
              index: 1,
            },
            {
              id: 13,
              num: '3',
              name: 'sayori',
              index: 2,
            },
            {
              id: 14,
              num: '4',
              name: 'yuri',
              index: 3,
            }
          ]
        },
        {
          id: 2,
          series: 'Bloom Into You',
          children: [
            {
              id: 21,
              num: '11',
              name: 'nanami',
              index: 0,
            },
            {
              id: 22,
              num: '12',
              name: 'yuu',
              index: 1,
            }
          ]
        },
      ];
      tableData.forEach(item => {
        item.checked = false;
        item.isIndeterminate = false;
      })
      this.tableData = tableData;
      this.total = this.tableData.length;
      this.loading = false;
    },

    checkAllChange() {
      const recursionSetChecked = (item, checked) => {
        item.checked = checked;
        item.isIndeterminate = false;
      }
      this.isIndeterminate = false;
      this.tableData.forEach(item => recursionSetChecked(item, this.isFullChecked));
    },

    checkRowChange(data) {
      data.checked = !data.checked;
      const recursion = node => {
        if (node.children && node.children.length > 0)
          node.isIndeterminate = false;
        return node;
      };
      this.tableData.forEach(item => recursion(item));

      if (this.tableData.every(item => item.checked)) {
        this.isFullChecked = true;
      }
      else if (this.tableData.every(item => !item.checked)) {
        this.isFullChecked = false;
      }

      this.isIndeterminate = this.tableData.some(item => item.isIndeterminate)
        ? true
        : this.tableData.some(item => !item.checked) && this.tableData.some(item => item.checked);
    }

  }
}
</script>

Leviash
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Leviash

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值