✨(table): 新增 defaultExpandAll 属性, 默认展开行, 适用子表与树表

2022-08-04 11:17:15 +08:00 · 2022-08-04 11:17:15 +08:00 · 53d270ffdc
commit 53d270ffdc
parent 0f4144fafc
5 changed files with 46 additions and 35 deletions
--- a/package/component/package.json
+++ b/package/component/package.json
@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "1.3.12-alpha.2",
+  "version": "1.3.12-alpha.4",
  "author": "就眠儀式",
  "license": "MIT",
  "description": "a component library for Vue 3 base on layui-vue",
--- a/package/component/src/component/switch/index.vue
+++ b/package/component/src/component/switch/index.vue
@ -53,7 +53,9 @@ const handleClick = () => {

 const styles = computed(() => {
  return {
-    "background-color": isActive.value ? props.onswitchColor : props.unswitchColor,
+    "background-color": isActive.value
+      ? props.onswitchColor
+      : props.unswitchColor,
  };
 });
 </script>
--- a/package/component/src/component/table/TableRow.vue
+++ b/package/component/src/component/table/TableRow.vue
@ -32,6 +32,7 @@ export interface LayTableRowProps {
  id: string;
  data: any;
  spanMethod: Function;
+  defaultExpandAll: boolean;
 }

 const slot = useSlots();
@ -68,7 +69,7 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
  },
 });

-const isExpand = ref(false);
+const isExpand = ref(props.defaultExpandAll);
 const slotsData = ref<string[]>([]);

 props.columns.map((value: any) => {
@ -190,36 +191,35 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
  }
 };

-const spanMethodAttr = (  
+const spanMethodAttr = (
  row: any,
  column: any,
  rowIndex: number,
-  columnIndex: number) => {
-  
-const attrs = props.spanMethod(row, column, rowIndex, columnIndex);
-  if(attrs instanceof Array) {
-    return {rowspan: attrs[0], colspan: attrs[1]}
-  } else if(attrs instanceof Object) {
+  columnIndex: number
+) => {
+  const attrs = props.spanMethod(row, column, rowIndex, columnIndex);
+  if (attrs instanceof Array) {
+    return { rowspan: attrs[0], colspan: attrs[1] };
+  } else if (attrs instanceof Object) {
    return attrs;
  } else {
-    return {rowspan: 1, colspan: 1}
+    return { rowspan: 1, colspan: 1 };
  }
-}
+};

-const isAutoShow = (  
+const isAutoShow = (
  row: any,
  column: any,
  rowIndex: number,
-  columnIndex: number) => {
-
+  columnIndex: number
+) => {
  const attrs = spanMethodAttr(row, column, rowIndex, columnIndex);
-  if(attrs.colspan == 0 && attrs.rowspan == 0) {
+  if (attrs.colspan == 0 && attrs.rowspan == 0) {
    return false;
  } else {
    return true;
  }
-
-}
+};
 </script>

 <template>
@ -237,7 +237,7 @@ const isAutoShow = (
            class="layui-table-cell layui-table-cell-radio"
            v-if="isAutoShow(data, column, index, columnIndex)"
            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"  
+            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
            :style="[
              {
                textAlign: column.align,
@ -286,7 +286,7 @@ const isAutoShow = (
            class="layui-table-cell layui-table-cell-checkbox"
            v-if="isAutoShow(data, column, index, columnIndex)"
            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"  
+            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
            :style="[
              {
                textAlign: column.align,
@ -339,7 +339,7 @@ const isAutoShow = (
            class="layui-table-cell layui-table-cell-number"
            v-if="isAutoShow(data, column, index, columnIndex)"
            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"  
+            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
            :style="[
              {
                textAlign: column.align,
@ -388,7 +388,7 @@ const isAutoShow = (
            class="layui-table-cell"
            v-if="isAutoShow(data, column, index, columnIndex)"
            :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"  
+            :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
            :style="[
              {
                textAlign: column.align,
@ -444,8 +444,12 @@ const isAutoShow = (
            <td
              class="layui-table-cell"
              v-if="isAutoShow(data, column, index, columnIndex)"
-              :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-              :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"  
+              :colspan="
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
              :style="[
                {
                  textAlign: column.align,
@ -527,6 +531,7 @@ const isAutoShow = (
        :rowStyle="rowStyle"
        :rowClassName="rowClassName"
        :spanMethod="spanMethod"
+        :defaultExpandAll="defaultExpandAll"
        @row="rowClick"
        @row-double="rowDoubleClick"
        @row-contextmenu="rowContextmenu"
--- a/package/component/src/component/table/index.vue
+++ b/package/component/src/component/table/index.vue
@ -46,6 +46,7 @@ export interface LayTableProps {
  rowStyle?: string | Function;
  cellStyle?: string | Function;
  spanMethod?: Function;
+  defaultExpandAll?: boolean;
 }

 const props = withDefaults(defineProps<LayTableProps>(), {
@ -62,7 +63,8 @@ const props = withDefaults(defineProps<LayTableProps>(), {
  expandIndex: 0,
  rowStyle: "",
  cellStyle: "",
-  spanMethod: () => {}
+  spanMethod: () => {},
+  defaultExpandAll: false,
 });

 const tableId = uuidv4();
@ -93,9 +95,13 @@ const tableColumnKeys = ref(

 const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);

-watch(() => props.selectedKeys, () => {
-  tableSelectedKeys.value = props.selectedKeys;
-},{deep: true})
+watch(
+  () => props.selectedKeys,
+  () => {
+    tableSelectedKeys.value = props.selectedKeys;
+  },
+  { deep: true }
+);

 const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
  get() {
@ -287,7 +293,7 @@ const getFixedColumn = () => {
      hasr.value = true;
    } else {
      // @ts-ignore
-      if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 >tableBody.value?.scrollWidth) {
+      if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 > tableBody.value?.scrollWidth) {
        hasl.value = true;
        hasr.value = false;
      } else {
@ -578,6 +584,7 @@ const renderTotalRowCell = (column: any) => {
                  :rowStyle="rowStyle"
                  :rowClassName="rowClassName"
                  :spanMethod="spanMethod"
+                  :defaultExpandAll="defaultExpandAll" 
                  @row="rowClick"
                  @row-double="rowDoubleClick"
                  @row-contextmenu="rowContextmenu"
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@ -226,7 +226,7 @@ export default {
 ::: demo 当表格内容较多不能一次性完全展示时。

 <template>
-  <lay-table :columns="columns6" :data-source="dataSource6">
+  <lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="true">
    <template v-slot:expand="{ data }"> 
      <lay-table :columns="columns6" :data-source="dataSource6"></lay-table>
    </template>
@ -276,7 +276,7 @@ export default {
 ::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段

 <template>
-  <lay-table :columns="columns7" :data-source="dataSource7">
+  <lay-table :columns="columns7" :data-source="dataSource7" :default-expand-all="true">
    <template #score="{ data }">{{ data }}</template>
  </lay-table>
 </template>
@ -817,7 +817,7 @@ export default {
 ::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。

 <template>
-  <lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24" :spanMethod="spanMethod24"></lay-table>
+  <lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24"></lay-table>
 </template>

 <script>
@ -849,8 +849,6 @@ export default {
        ellipsisTooltip: true
      }
    ]
-    
-    const selectedKey24 = ref("2");

    const dataSource24 = [
      {id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
@ -879,7 +877,6 @@ export default {
      columns24,
      dataSource24,
      spanMethod24,
-      selectedKey24,
    }
  }
 }