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

Leviash2023-08-26 9:16

功能介绍

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

示例

代码

视图部分

html 复制代码 
<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方法。

逻辑部分

组件的数据:

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

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

javascript 复制代码 
 mounted() {
    this.getList()
  }

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

javascript 复制代码 
 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，以确保全选复选框的状态正确更新：

javascript 复制代码 
 watch: {
    tableData() {
      this.isFullChecked = false;
      this.isIndeterminate = false;
    }
  }

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

  • checkAllChange()方法用于处理全选复选框状态的改变。该方法首先定义了一个递归函数recursionSetChecked(item, checked)，用于设置数据项的checked状态和isIndeterminate状态。然后，通过遍历tableData数组，调用recursionSetChecked(item, this.isFullChecked)方法来设置每个数据项的状态。最后，设置isIndeterminate为false。
javascript 复制代码 
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）。
javascript 复制代码 
  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);
    }

完整代码

javascript 复制代码 
<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>
相关推荐
程序猿阿伟2 小时前
《首屏加载优化手册：Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据2 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉2 小时前
面试-浅复制和深复制？怎样实现深复制详细解答
javascript·面试·职场和发展
fruge3 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有3 小时前
某教育大厂面试题解析：MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
sean3 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636023 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML！AI 助力，3 分钟搞定专业级课件
前端
chxii4 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够4 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
太过平凡的小蚂蚁5 小时前
Kotlin 协程中常见的异步返回与控制方式（速览）
开发语言·前端·kotlin
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05GitLab 零基础入门指南：从安装到项目管理全流程06Burp与其他安全工具联动及代理设置教程07Pycharm+Neo4j红楼梦人物关系图谱08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09jdk21下载、安装（Windows、Linux、macOS）10Labelme从安装到标注：零基础完整指南