JS antdv实现表格树形级联效果

最新推荐文章于 2024-02-07 10:58:56 发布
最新推荐文章于 2024-02-07 10:58:56 发布
阅读量642 收藏
点赞数
文章标签： javascript 前端 vue antDv组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40292154/article/details/131583490
版权
概述

项目中需实现以下这种效果：级联数据，表格横向排列，数据之间相互联动。现有UI组件无法满足此需求，只能撸起袖子加油干！！
在这里插入图片描述
实现效果如下
请添加图片描述
开发前先准备一个树形数据 treeData.js

const treeData = [
  {
    areaName: "江苏",
    areaCode: "100",
    checked: false,
    indeterminate: false,
    order: 1,
    children: [
      {
        areaName: "无锡",
        areaCode: "1001",
        parentCode: "100",
        checked: false,
        indeterminate: false,
        order: 1,
        children: [
          {
            areaName: "鼓楼区",
            areaCode: "10011",
            parentCode: "1001",
            checked: false,
            indeterminate: false,
            order: 1,
            children: [],
          },
          {
            areaName: "玄武区",
            areaCode: "10012",
            parentCode: "1001",
            checked: false,
            indeterminate: false,
            order: 2,
            children: [],
          },
          {
            areaName: "秦港区",
            areaCode: "10013",
            parentCode: "1001",
            checked: false,
            indeterminate: false,
            order: 3,
            children: [],
          },
          {
            areaName: "浦口区",
            areaCode: "10014",
            parentCode: "1001",
            checked: false,
            indeterminate: false,
            order: 4,
            children: [],
          },
        ],
      },
      {
        areaName: "南京",
        areaCode: "1002",
        parentCode: "100",
        checked: false,
        indeterminate: false,
        order: 1,
        children: [
          {
            areaName: "鼓楼区2",
            areaCode: "10021",
            parentCode: "1002",
            checked: false,
            indeterminate: false,
            order: 1,
            children: [],
          },
          {
            areaName: "玄武区2",
            areaCode: "10022",
            parentCode: "1002",
            checked: false,
            indeterminate: false,
            order: 2,
            children: [],
          },
          {
            areaName: "秦港区2",
            areaCode: "10023",
            parentCode: "1002",
            checked: false,
            indeterminate: false,
            order: 3,
            children: [],
          },
          {
            areaName: "浦口区2",
            areaCode: "10024",
            parentCode: "1002",
            checked: false,
            indeterminate: false,
            order: 4,
            children: [],
          },
        ],
      },
    ],
  },
  {
    areaName: "浙江",
    areaCode: "200",
    checked: false,
    indeterminate: false,
    order: 1,
    children: [
      {
        areaName: "杭州",
        areaCode: "2001",
        parentCode: "200",
        checked: false,
        indeterminate: false,
        order: 1,
        children: [
          {
            areaName: "鼓楼区1",
            areaCode: "20011",
            parentCode: "2001",
            checked: false,
            indeterminate: false,
            order: 1,
            children: [],
          },
          {
            areaName: "玄武区1",
            areaCode: "20012",
            parentCode: "2001",
            checked: false,
            indeterminate: false,
            order: 2,
            children: [],
          },
          {
            areaName: "秦港区1",
            areaCode: "20013",
            parentCode: "2001",
            checked: false,
            indeterminate: false,
            order: 3,
            children: [],
          },
          {
            areaName: "浦口区1",
            areaCode: "20014",
            parentCode: "2001",
            checked: false,
            indeterminate: false,
            order: 4,
            children: [],
          },
        ],
      },
      {
        areaName: "宁波",
        areaCode: "2002",
        parentCode: "200",
        checked: false,
        indeterminate: false,
        order: 1,
        children: [
          {
            areaName: "鼓楼区2",
            areaCode: "20021",
            parentCode: "2002",
            checked: false,
            indeterminate: false,
            order: 1,
            children: [],
          },
          {
            areaName: "玄武区2",
            areaCode: "20022",
            parentCode: "2002",
            checked: false,
            indeterminate: false,
            order: 2,
            children: [],
          },
          {
            areaName: "秦港区2",
            areaCode: "20023",
            parentCode: "2002",
            checked: false,
            indeterminate: false,
            order: 3,
            children: [],
          },
          {
            areaName: "浦口区2",
            areaCode: "20024",
            parentCode: "2002",
            checked: false,
            indeterminate: false,
            order: 4,
            children: [],
          },
        ],
      },
    ],
  },
];
export default treeData;

完整代码
具体的每一个细节我都在代码注释了，这里就不单独抽出来赘述了，详细的分析请看大屏幕…

<template>
  <a-modal
    :title="addConfig.title"
    :showSubmit="false"
    :visible="addConfig.visible"
    @ok="handleAddOk"
    @cancel="handleCancel"
  >
    <div class="container_box">
      <div class="container_header">
        <div v-for="item in 3" :key="item" class="header_item">
          <div class="title"><span>名称</span></div>
          <div class="title"><span>排序</span></div>
        </div>
      </div>
      <div class="container_body">
        <div class="body_item" v-for="(list, index) in listData" :key="index">
          <div
            class="item_list"
            :style="{
              backgroundColor: item.clickStatus
                ? 'rgba(19,194,194,.3)'
                : '#ffffff',
            }"
            v-for="item in list"
            :key="item.areaCode"
            @click.capture="handleClickAreaItem(item)"
          >
            <div class="item">
              <a-checkbox
                :indeterminate="item.indeterminate"
                v-model="item.checked"
                @change="onCheckAllChange($event, item)"
              >
                {{ item.areaName }}
              </a-checkbox>
            </div>
            <div class="item">
              <a-input v-model="item.order" placeholder="排序" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import treeData from "./treeData";
let filterData = [];
export default {
  name: "addArea",
  props: {
    addConfig: Object,
  },
  data() {
    return {
      listData: [],
    };
  },
  mounted() {
    this.handleTreeData(treeData, 1);
    // 初始化数据
    treeData[0].clickStatus = true;
    treeData[0].children[0].clickStatus = true;
    this.listData = [
      treeData,
      treeData[0].children,
      treeData[0].children[0].children,
    ];
  },
  methods: {
    // 点击每一个item 显示选中状态并进行数据联动
    handleClickAreaItem(item) {
      if (item.level === 3) return;
      let list = [];
      if (item.parentCode) {
        // 点击第二或第三级
        this.handleFilterData(treeData, item.parentCode);
        list = filterData[0]?.children;
      } else {
        // 点击第一级
        list = treeData;
        // 切换第一级时 第二级默认选择第一个
        let arr = treeData.filter((lis) => lis.areaCode === item.areaCode);
        arr[0]?.children.forEach((lis, index) => {
          if (index === 0) {
            lis.clickStatus = true;
          } else {
            lis.clickStatus = false;
          }
        });
      }
      list.forEach((lis) => {
        if (lis.areaCode === item.areaCode) {
          lis.clickStatus = true;
          // 子级数据跟随联动
          if (item.level === 1) {
            this.listData[1] = lis.children;
            this.listData[2] = lis.children[0].children;
          } else if (item.level === 2) {
            this.listData[2] = lis.children;
          }
        } else {
          lis.clickStatus = false;
        }
      });
    },
    handleTreeData(list, levelIndex) {
      list.forEach((lis) => {
        lis.clickStatus = false;
        // 动态标记每层层级
        lis.level = levelIndex;
        if (lis.children && lis.children.length !== 0)
          this.handleTreeData(lis.children, levelIndex + 1);
      });
    },
    handleAddOk(e) {
      e && e.preventDefault();
    },
    handleCancel() {
      this.$emit("cancel");
    },
    // 向下处理树形选中/未选中
    handleDownTreeCheck(arr, checked) {
      arr.forEach((iii) => {
        iii.indeterminate = false;
        iii.checked = checked;
        if (iii.children && iii.children.length !== 0)
          this.handleDownTreeCheck(iii.children, checked);
      });
    },
    // 向上处理树形选中/未选中
    handleUpTreeCheck(item) {
      this.handleFilterData(treeData, item.parentCode);
      let list = filterData[0];
      let status1 = list.children.some((ii) => ii.checked);
      let status2 = list.children.every((ii) => ii.checked);
      let statusIn = list.children.some((ii) => ii.indeterminate);
      // 当不全选中且子集有勾选中 或者 子集有indeterminate状态为true
      list.indeterminate = status1 || statusIn;
      // 当全选中的时候 indeterminate 状态 为false
      if (status2) list.indeterminate = false;
      list.checked = status2;
      // 层层向上处理
      if (list.parentCode) this.handleUpTreeCheck(list);
    },
    onCheckAllChange(e, item) {
      item.indeterminate = false;
      filterData = [];
      // 当前点击的该项中有父级的情况下 比如当前点击项为第二、三....
      if (item.parentCode) this.handleFilterData(treeData, item.parentCode);
      // 当前点击的该项中存在父级数据情况下 比如当前点击项为第二、三.... 则向上处理元素状态
      if (filterData.length > 0) this.handleUpTreeCheck(item);
      // 当前点击的该项中存在子集数据情况下 则向下处理元素状态
      if (item.children && item.children.length > 0)
        this.handleDownTreeCheck(item.children, e.target.checked);
    },
    handleFilterData(list, parentCode) {
      // 过滤数据
      list.forEach((lis) => {
        if (lis.areaCode === parentCode) {
          filterData = [];
          filterData.push(lis);
        }
        if (lis.children && lis.children.length !== 0)
          this.handleFilterData(lis.children, parentCode);
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal {
  width: 840px !important;
  .ant-modal-close {
    color: #fff;
    .ant-modal-close-x {
      height: 47px;
      line-height: 47px;
    }
  }
  .ant-modal-header {
    padding: 12px 20px;
    background-color: #02c7b5;
    .ant-modal-title {
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .ant-modal-body {
    // padding: 24px 27px 6px;
  }
  .container_box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .container_header {
      display: flex;
      align-items: center;
      width: 100%;
      background-color: #f4f7fb !important;
      border-radius: 6px 6px 0px 0px;
      .header_item {
        flex: 4;
        height: 42px;
        line-height: 42px;
        display: flex;
        align-items: center;
        .title {
          flex: 6;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #242525;
        }
      }
    }
    .container_body {
      display: flex;
      width: 100%;
      .body_item {
        flex: 4;
        flex-direction: column;
        .item_list {
          display: flex;
          align-items: center;
          margin-top: 10px;
          .item {
            flex: 6;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #242525;
            .ant-input {
              width: 86px !important;
            }
          }
        }
        &:nth-child(2) {
          border-left: 2px solid #f1f1f1;
          border-right: 2px solid #f1f1f1;
        }
      }
    }
  }
}
</style>
繁花&遇见
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js生成树形列表（一般用于菜单树结构的生成）
Lsir1998的博客
09-05 259
js无限生成属性结构
Ant Design：树形表格
闪电⚡之王的博客简介
12-27 952
【代码】Ant Design：树形表格。
antd-design-vue 树表联动 a-tree+a-table
花椒和蕊的博客
08-17 3070
树表联动，每次点击树节点，刷新右侧列表的数据 首先是布局，display：flex布局， 左侧树 <div class="left-card" > <a-col :span="23"> <a-tree :treeData="treeData" :replace-fields="replaceFied" @select="handleSelect" >
vue-级联表单二级表单无不显示的问题
startyangu的博客
11-30 349
vue-级联表单二级表单无不显示的问题
【antd + vue】a-table 树形数据展示 - 嵌套子表格
m0_65041204的博客
03-09 2032
Ant Design Vue 组件 a-table 嵌套表格时，父表格展开后，子表格的数据渲染了2次
js实现日期级联效果
12-02
代码如下:  <select name=”YYYY” onchange=”YYYYMM(this.value)”> ””>请选择 年 </select> <select name=”MM” onchange=”MMDD(this.value)”> ””>选择 月 <...
js实现全国省份城市级联下拉菜单效果代码
10-23
主要介绍了js实现全国省份城市级联下拉菜单效果代码,通过JavaScript针对数组的定义与元素的遍历实现省市级联菜单功能,非常具有实用价值,需要的朋友可以参考下
树形表格js
05-17
树形表格，支持折叠展开，行点击获取当前行，父节点，子节点，级联勾选 使用文档https://blog.csdn.net/u012796085/article/details/80357317
antd table 树形数据展示 搜索子数据 展开父节点并高亮搜索出来的数据
最新发布
https://github.com/lisy999?tab=repositories
02-07 889
【代码】antd table 树形数据展示 搜索子数据 展开父节点并高亮搜索出来的数据。
vue jsx 封装Table 表格+Tree 树形控件
老司机的后备箱
09-29 1522
通过表格展示树的层级，可通过对树的勾选对每一个界面的dom元素进行控制，控制程度可精确到组件/标签整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
React Ant Design树形表格的复杂增删改操作
01-18
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。 树形表格的显示 在antd中对于表格的key值有着严格的控制，每一个row都必须有一个独一无二的key值，可以是数字也可以是字符串。这一点和我曾经使用过得iview有着很大的区别。react使用key来代表每一行是为了避免重新渲染的问题，这个优化也在实际的开发中带来了不少的问题。比如新建行时需要自定义新key。 下面直接上一下代码及代码效果，这是一个三级的树形表格，且其中包含二级标题。 最终效果 ​ colu
jqueryTreeTable+ajax(构建树形表格)
05-28
jqery.treeTable + ajax + mysql数据库， ssm架构构建树形表格
树状表格，可编辑
03-25
在别人的树状表格基础上做了可编辑
go.js实现表格树形连接
10-03
go.js实现:table格式展示数据，通过线连接多个table，体现表格上下或者从属关系。坑踩多了什么奇葩需求都有
bootstrap树形表格js插件
04-08
创建bootsstrap的树形表格，用于显示权限页面的树形结构
antd表格树形数据展示的问题
sky1679的博客
11-27 4503
这是场景，能明显看到2018/12/31是偏下的。 我一开始以为是因为td没有设置垂直居中。但是并没有用。 后面发现有个这么个东西 他是有一定宽度的，所以如果你列宽度设置少了，就会把文字挤到下一行。 把列宽度设置大一点即可解决 ...
jqGrid JS之TreeGrid (树形表格)- yellowcong
热门推荐
08-02 2万+
JqGrid的版本是jqGrid JS - v5.1.0，然后根据中文的API，咋整都没有弄出来，当时真是心累啊，主要注意的有id隐藏列定义、Grid数据定义（注意parent、id的数据类型以及Grid数据格式），Grid的数据设定
一款树形表格的插件TreeGrid
luisfigook的专栏
03-09 2万+
最近在开发过程中需要用到树形表格，于是求助了google大神，发现了TreeGrid Jquery Plugin, 重要的是TreeGrid兼容了我用的BootStrap, 所以感觉起来比较方便 TreeGrid地址: http://maxazan.github.io/jquery-treegrid/ TreeGrid For BootStrap3.0地址: http://maxazan.
[Layui]JS实现Layui树形表格treetable演示下载
德仔
03-10 1579
地址： 添加链接描述 后面写一篇完整的前后端处理DEMO
html+js 实现树形级联选择框代码
04-26
好的，这是一个基于 HTML、JavaScript 和 jQuery 的树形级联选择框代码： HTML 代码： ``` 请选择一级分类 分类1 分类2 分类3 请选择二级分类 请选择三级分类 ``` JS 代码： ``` $(function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值