(component): 新增 table 组件 v-model:expandKeys 属性, 意为当前展开行

This commit is contained in:
就眠儀式 2022-08-04 16:28:06 +08:00
parent 53d270ffdc
commit a61c6d0bef
5 changed files with 60 additions and 18 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "1.3.12-alpha.4", "version": "1.3.12-alpha.5",
"author": "就眠儀式", "author": "就眠儀式",
"license": "MIT", "license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",

View File

@ -127,13 +127,7 @@ const isDisabled = computed(() => {
><slot>{{ label }}</slot></span ><slot>{{ label }}</slot></span
> >
<lay-icon <lay-icon
:type=" :type="props.isIndeterminate && isChecked ? 'layui-icon-subtraction' : isChecked ? 'layui-icon-ok' : ''"
props.isIndeterminate && isChecked
? 'layui-icon-subtraction'
: isChecked
? 'layui-icon-ok'
: ''
"
></lay-icon> ></lay-icon>
</div> </div>
</span> </span>

View File

@ -33,6 +33,7 @@ export interface LayTableRowProps {
data: any; data: any;
spanMethod: Function; spanMethod: Function;
defaultExpandAll: boolean; defaultExpandAll: boolean;
expandKeys: Recordable[];
} }
const slot = useSlots(); const slot = useSlots();
@ -40,6 +41,7 @@ const emit = defineEmits([
"row", "row",
"row-double", "row-double",
"row-contextmenu", "row-contextmenu",
"update:expandKeys",
"update:selectedKeys", "update:selectedKeys",
"update:selectedKey", "update:selectedKey",
]); ]);
@ -51,6 +53,17 @@ const props = withDefaults(defineProps<LayTableRowProps>(), {
cellClassName: "", cellClassName: "",
}); });
const tableExpandAll = ref(props.defaultExpandAll);
const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
get() {
return [...props.expandKeys];
},
set(val) {
emit("update:expandKeys", val);
},
});
const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({ const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
get() { get() {
return [...props.selectedKeys]; return [...props.selectedKeys];
@ -69,7 +82,22 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
}, },
}); });
const isExpand = ref(props.defaultExpandAll); const isExpand: WritableComputedRef<any> = computed({
get() {
return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
},
set(val) {
let newTableExpandKeys = [...tableExpandKeys.value]
if (!val) {
newTableExpandKeys.splice(newTableExpandKeys.indexOf(props.data[props.id]), 1);
} else {
newTableExpandKeys.push(props.data[props.id]);
}
tableExpandAll.value = false;
tableExpandKeys.value = newTableExpandKeys;
},
});
const slotsData = ref<string[]>([]); const slotsData = ref<string[]>([]);
props.columns.map((value: any) => { props.columns.map((value: any) => {
@ -535,6 +563,7 @@ const isAutoShow = (
@row="rowClick" @row="rowClick"
@row-double="rowDoubleClick" @row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu" @row-contextmenu="rowContextmenu"
v-model:expandKeys="tableExpandKeys"
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKeys="tableSelectedKeys"
v-model:selectedKey="tableSelectedKey" v-model:selectedKey="tableSelectedKey"
> >

View File

@ -47,6 +47,7 @@ export interface LayTableProps {
cellStyle?: string | Function; cellStyle?: string | Function;
spanMethod?: Function; spanMethod?: Function;
defaultExpandAll?: boolean; defaultExpandAll?: boolean;
expandKeys?: Recordable[];
} }
const props = withDefaults(defineProps<LayTableProps>(), { const props = withDefaults(defineProps<LayTableProps>(), {
@ -65,12 +66,14 @@ const props = withDefaults(defineProps<LayTableProps>(), {
cellStyle: "", cellStyle: "",
spanMethod: () => {}, spanMethod: () => {},
defaultExpandAll: false, defaultExpandAll: false,
expandKeys: () => []
}); });
const tableId = uuidv4(); const tableId = uuidv4();
const emit = defineEmits([ const emit = defineEmits([
"change", "change",
"update:expandKeys",
"update:selectedKeys", "update:selectedKeys",
"update:selectedKey", "update:selectedKey",
"row-contextmenu", "row-contextmenu",
@ -112,6 +115,15 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
}, },
}); });
const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
get() {
return [...props.expandKeys];
},
set(val) {
emit("update:expandKeys", val);
},
});
watch( watch(
() => props.dataSource, () => props.dataSource,
() => { () => {
@ -588,6 +600,7 @@ const renderTotalRowCell = (column: any) => {
@row="rowClick" @row="rowClick"
@row-double="rowDoubleClick" @row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu" @row-contextmenu="rowContextmenu"
v-model:expandKeys="tableExpandKeys"
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKeys="tableSelectedKeys"
v-model:selectedKey="tableSelectedKey" v-model:selectedKey="tableSelectedKey"
> >

View File

@ -226,7 +226,8 @@ export default {
::: demo 当表格内容较多不能一次性完全展示时。 ::: demo 当表格内容较多不能一次性完全展示时。
<template> <template>
<lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="true"> 展开行: {{ expandKeys6 }}
<lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="defaultExpandAll6" v-model:expand-keys="expandKeys6">
<template v-slot:expand="{ data }"> <template v-slot:expand="{ data }">
<lay-table :columns="columns6" :data-source="dataSource6"></lay-table> <lay-table :columns="columns6" :data-source="dataSource6"></lay-table>
</template> </template>
@ -252,17 +253,22 @@ export default {
] ]
const dataSource6 = [ const dataSource6 = [
{name:"张三", score:100}, {id:"1", name:"张三", score:100},
{name:"李四", score:80}, {id:"2", name:"李四", score:80},
{name:"王二", score:99}, {id:"3", name:"王二", score:99},
{name:"麻子", score:92}, {id:"4", name:"麻子", score:92},
{name:"无名", score:60}, {id:"5", name:"无名", score:60},
{name:"有名", score:70}, {id:"6", name:"有名", score:70},
] ]
const expandKeys6 = ref(["1"])
const defaultExpandAll6 = ref(false)
return { return {
columns6, columns6,
dataSource6 dataSource6,
expandKeys6,
defaultExpandAll6
} }
} }
} }