✨(component): 新增 table 组件 v-model:expandKeys 属性, 意为当前展开行
This commit is contained in:
parent
53d270ffdc
commit
a61c6d0bef
@ -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",
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
>
|
>
|
||||||
|
@ -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"
|
||||||
>
|
>
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user