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>