当前位置: 首页 > 工具软件 > Cool-Node > 使用案例 >

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

訾凯歌
2023-12-01

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-table
				ref="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>

 类似资料: