cool-admin框架前端使用-vue3版本，树形表格批量展开和收起

cl-table组件加上row-key，:default-expand-all和:expand-row-keys

row-key参数是行的key，这里我默认用id，所以下面expand-row-keys参数数组必定要插入行id
:default-expand-all参数是布尔值，这里我默认给false
:expand-row-keys参数是一个数组，点击事件后，如果插入行id，会展开该行，反之，为空，则全部收起

<template><cl-crud ref="Crud"><el-row><el-button type="success" @click="rowExpand">{{ expand }}</el-button></el-row><el-row><!-- 数据表格 --><cl-tableref="Table"row-key="id":default-expand-all="defaultExpand":expand-row-keys="expandRowKeys"></cl-table></el-row></cl-crud>
</template>

<script lang="ts" name="portal-cate" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { ref } from "vue";const { service } = useCool();
const expandRowKeys = ref<any[]>([]);
const expand = ref("全部展开");
const defaultExpand = ref(false);/*** 批量展开和收起*/
const rowExpand = () => {expand.value = expand.value == "全部展开" ? "全部收起" : "全部展开";//批量展开defaultExpand.value = !defaultExpand.value;//批量收起if (!defaultExpand.value) {expandRowKeys.value = [];}};// cl-crud 配置
const Crud = useCrud({service: service.portal.cate,onRefresh(_, { render }) {service.portal.cate.list().then((list) => {render(deepTree(list));});}},async (app) => {app.refresh();}
);
</script>

cool-admin框架前端使用-vue3版本，树形表格批量展开和收起相关推荐

cool-admin框架前端使用-vue3版本，useUpsert使用
1. 设置组件input 状态不可编辑设置组件input 状态不可编辑在component的props添加 disabled: true <script lang="ts" ...
前端动态生成横向树形表格
一.问题遇到项目需求是横向展示树形数据,之前写的时候element的官方有加载树形数据的表格组件,项目其他地方有用表格组件的写的demo,但是涉及到行合并的逻辑判断,一时没搞清楚,就用原生画了表格. ...
vue3.0树形表格插件vue-table-with-tree-grid（vue.2.0）替换 vxe-table（vue3.0）
由于看黑马,视频,那个vue-table-with-tree-grid在vue3 不能用,所以用这个替换下 vxe-table官网 https://vxetable.cn/#/table/start/ ...
el-table 树形表格自定义展开图标_耍好控件 | 产品图标体系是如何炼成的？
温馨提示:建议阅读时间9分钟.文末还为大家准备了网易云音乐Android视觉规范一份,进行学习与参考,记得领取哦~ 前不久我在讲标签栏专题的时候,有聊到过一次图标(可回顾:<了解图标落地,让前端 ...
antd 表格树如何展开_ant-design-pro protable 树形表格默认展开
Protable 是在antd 的 table 上进行了一层封装,antd -table中有的属性它都支持. 当表格数据中有children字段,table会默认生成树形可展开表格,有时候需要一开始就 ...
el-table 树形表格自定义展开图标_[shell脚本]表格数据在终端可视化输出
最终效果 1. 自定义表格样式 2. 自定义主题颜色支持三系普通颜色支持16色彩虹色支持单颜色回顾一下shell语法 1. shell传递参数我们可以在执行shell脚本时实时传递参数从而指 ...
el-table 树形表格自定义展开图标_实践一个树形组件
想实践一个树形组件的起因是发现目前主流UI库在树形组件上都没有提供连接线(ant design有,但不知道为什么设计得发虚,就是各元素之间没有严格衔接上,见下图,而Vue生态圈中的Element UI ...
el-table 树形表格自定义展开图标_Icon Slate for mac(图标制作工具) v4.5.0
Synthesia mac版是Mac os平台上的一款帮助用户快速制作logo的Mac图标制作软件,Icon Slate for mac是一款让您轻松创建,输入和输出多种格式电脑和移动终端程序图标的图 ...
el-table 树形表格自定义展开图标_图标制作工具 Icon Slate for mac
Icon Slate for mac(图标制作工具)www.macdown.com Mac os平台上的一款帮助用户快速制作logo的Mac图标制作软件,Icon Slate mac是一款让您轻松创 ...

cool-admin框架前端使用-vue3版本，树形表格批量展开和收起

cl-table组件加上row-key，:default-expand-all和:expand-row-keys

cool-admin框架前端使用-vue3版本，树形表格批量展开和收起相关推荐

最新文章

热门文章