Ant Design Vue 表格数据按树型展示
/*** 使用递归将数组转为树形结构* 父ID属性为parent*/public static array2Tree (array: any, parentId: number) {if (Tool.isEmpty(array)) {return [];}const result = [];for (let i = 0; i < array.length; i++) {const c = array[i];// console.log(Number(c.parent), Number(parentId));if (Number(c.parent) === Number(parentId)) {result.push(c);// 递归查看当前节点对应的子节点const children = Tool.array2Tree(array, c.id);if (Tool.isNotEmpty(children)) {c.children = children;}}}return result;}
<a-table:columns="columns":row-key="record => record.id":data-source="level1":pagination="false":loading="loading"></a-table>
/*** 一级分类树,children属性就是二级分类* [{* id: "",* name: "",* children: [{* id: "",* name: "",* }]* }]*/const level1 = ref(); // 一级分类树,children属性就是二级分类level1.value = [];
/*** 数据查询*/const handleQuery = () => {loading.value = true;axios.get("/category/all").then((response) => {loading.value = false;const data = response.data;if (data.success) {categorys.value = data.content;console.log("原始数组:", categorys.value);level1.value = [];level1.value = Tool.array2Tree(categorys.value, 0);console.log("树形结构:", level1);} else {message.error(data.message);}});};
return {level1,}
Ant Design Vue 表格数据按树型展示相关推荐
- Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析 在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
- ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示 原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
- Ant Design Vue 表格内编辑(附完整源码及效果图)
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...
- ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
- Ant Design Vue页面数据复制
页面编辑时复制对象,修改表单时,不影响列表数据 /*** 空校验 null或""都返回true*/public static isEmpty (obj: any) {if ((ty ...
- ant design vue表格列表时间戳转时间
import moment from 'moment' tableHeader: [{dataIndex: 'purchaseVoucherDate',title: '凭证日期', //'凭证日期', ...
- antd 表格树如何展开_React Ant Design树形表格的复杂增删改
React Ant Design树形表格的复杂增删改 最近由于业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中碰见了很多坑,不少功能antd只写了初步的功能,更为细化 ...
- ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色 一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
- 记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题
记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题 先贴解决后的代码 option遍历的集合格式如下 解释 官方文档中解释到select ...
最新文章
- 使用jQuery更改下拉列表的选定值
- [bzoj 4869] [六省联考2017] 相逢是问候
- POJ1220(高精度进制转换)
- JS语法apply()与call()的区别
- 嵌入式linux加载引导内核和根文件系统的方法
- 计算机页面图形颠倒,电脑屏幕倒过来了如何解决
- yum -y install php-mysql 版本冲突
- linux python mysqldb安装包,linux环境下python中MySQLdb模块的安装方法
- 官宣,PyTorch 1.0 稳定版本现已推出
- 【数学优化】学习知识点
- 洛可可集团董事长贾伟:未来组织的进化
- 语音识别属于计算机的什么应用领域,语音识别系统
- linux 触控板 不识别,关于Ubuntu下触摸板失灵的解决方法一例
- SAP 对销售价格新增的处理
- 低级格式化软件测试,低级格式化,几款优秀的低级格式化工具对比制作步骤
- Python学习笔记——给图片格式转换器做个GUI
- matlab里怎么计算期望,§7.4.2 利用MATLAB计算随机变量的期望和方差.pdf
- “黎明号”(Dawn)深空航天器与高效离子引擎
- web前端优化与细节
- 2013年中国城市及省份GDP排名