🐛(component): table 组件 indentSize 属性, 在加载远程数据时不生效的问题

This commit is contained in:
就眠儀式 2022-10-03 01:34:30 +08:00
parent 78b2189974
commit 85b14ba7e4
6 changed files with 29 additions and 17 deletions

View File

@ -172,7 +172,7 @@ const renderRowClassName = (data: any, index: number) => {
return props.rowClassName(data, index); return props.rowClassName(data, index);
}; };
const childrenIndentSize = props.currentIndentSize + props.indentSize; const childrenIndentSize = computed(() => props.currentIndentSize + props.indentSize);
const renderFixedStyle = (column: any, columnIndex: number) => { const renderFixedStyle = (column: any, columnIndex: number) => {
if (column.fixed) { if (column.fixed) {

View File

@ -503,12 +503,12 @@ props.columns.map((value: any) => {
}); });
const currentIndentSize = ref(0); const currentIndentSize = ref(0);
const childrenExpandSpace = ref(false); const childrenExpandSpace = computed(() => {
return props.dataSource.find((value: any) => {
props.dataSource.map((value: any) => { if (value[props.childrenColumnName]) {
if (value[props.childrenColumnName]) { return true;
childrenExpandSpace.value = true; }
} }) != undefined;
}); });
/** /**

View File

@ -24,7 +24,7 @@ export interface TreeProps {
checkedKeys?: KeysType; checkedKeys?: KeysType;
data: OriginalTreeData; data: OriginalTreeData;
showCheckbox?: boolean; showCheckbox?: boolean;
checkStrictly: boolean; checkStrictly?: boolean;
edit?: EditType; edit?: EditType;
collapseTransition?: boolean; collapseTransition?: boolean;
onlyIconControl?: boolean; onlyIconControl?: boolean;

View File

@ -1,6 +1,7 @@
import { OriginalTreeData, StringOrNumber } from "./tree.type"; import { OriginalTreeData, StringOrNumber } from "./tree.type";
import { Nullable } from "../../types"; import { Nullable } from "../../types";
import { Ref, ref } from "vue"; import { Ref, ref } from "vue";
import { check } from "prettier";
type CustomKey = string | number; type CustomKey = string | number;
type CustomString = (() => string) | string; type CustomString = (() => string) | string;
@ -134,11 +135,20 @@ class Tree {
setChildrenChecked(checked: boolean, nodes: TreeData[]) { setChildrenChecked(checked: boolean, nodes: TreeData[]) {
const len = nodes.length; const len = nodes.length;
/**
* , , ,
*
* , ,
*
* ,
*/
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
nodes[i].isChecked = checked; if(!nodes[i].isDisabled || (nodes[i].isDisabled && nodes[i].children.length > 0)) {
nodes[i].isChecked = checked;
}
nodes[i].children && nodes[i].children &&
nodes[i].children.length > 0 && nodes[i].children.length > 0 &&
this.setChildrenChecked(checked, nodes[i].children); this.setChildrenChecked(checked, nodes[i].children);
} }
} }

View File

@ -197,9 +197,9 @@ function handleClick(node) {
<template> <template>
<lay-tree <lay-tree
:data="data2" :data="data3"
v-model:checkedKeys="checkedKeys" v-model:checkedKeys="checkedKeys3"
:showCheckbox="showCheckbox" :showCheckbox="showCheckbox"
collapse-transition collapse-transition
> >
</lay-tree> </lay-tree>
@ -213,7 +213,7 @@ import { ref } from 'vue';
const updateCheckedKeys=()=>{ const updateCheckedKeys=()=>{
checkedKeys.value=[4] checkedKeys.value=[4]
} }
const data2 = ref([{ const data3 = ref([{
title: '一级1', title: '一级1',
id: 1, id: 1,
field: 'name1', field: 'name1',
@ -316,7 +316,8 @@ const data2 = ref([{
{ {
title: '三级2-1-2', title: '三级2-1-2',
id: 12, id: 12,
field: '' field: '',
disabled: true
}] }]
}, },
{ {
@ -375,7 +376,7 @@ const data2 = ref([{
const updateView=()=>{ const updateView=()=>{
data2.value[0].title='更新视图' data2.value[0].title='更新视图'
} }
const checkedKeys = ref([2,3]) const checkedKeys3 = ref([12, 14])
const showCheckbox = ref(true) const showCheckbox = ref(true)
</script> </script>

View File

@ -21,6 +21,7 @@
<li>[修复] tree 组件 node 配置 disabled 启用时, @node-click 事件仍触发的问题。</li> <li>[修复] tree 组件 node 配置 disabled 启用时, @node-click 事件仍触发的问题。</li>
<li>[修复] checkbox 组件 label 属性与 default 插槽不设置, layui-checkbox-label 元素仍存在的问题。</li> <li>[修复] checkbox 组件 label 属性与 default 插槽不设置, layui-checkbox-label 元素仍存在的问题。</li>
<li>[修复] tree 组件 show-checkbox 为 true 时, 复选框与标题间距过宽的问题。</li> <li>[修复] tree 组件 show-checkbox 为 true 时, 复选框与标题间距过宽的问题。</li>
<li>[修复] table 组件 indentSize 属性, 在加载远程数据时不生效的问题。</li>
<li>[调整] date-picker 组件 laydate-range-hover 前景色与背景色。</li> <li>[调整] date-picker 组件 laydate-range-hover 前景色与背景色。</li>
</ul> </ul>
</li> </li>