leiyun
/
ai_uniapp_v2
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
1 Commit
1 Rama
4.2 MiB
 
 
 
Árbol: 635772c47b
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '635772c47b'
${ noResults }
ai_uniapp_v2/uni_modules/uview-plus/components/u-table2/u-table2.vue

1107 líneas
42 KiB
Original Blame Histórico 

  1. <template>

  2.     <view class="u-table2" :class="{ 'u-table-border': border }">

  3.         <scroll-view scroll-x scroll-y class="u-table2-content"

  4.             :style="{ height: height ? addUnit(height) : 'auto' }"

  5.             @scroll="onScroll">

  6.             <!-- 表头 -->

  7.             <view v-if="showHeader" class="u-table-header"

  8.                 :class="{ 'u-table-sticky': fixedHeader }"

  9.                 :style="{minWidth: scrollWidth}">

  10.                 <view class="u-table-row">

  11.                     <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"

  12.                         :class="[col.headerAlign ? 'u-text-' + col.headerAlign : (col.align ? 'u-text-' + col.align : '') ,

  13.                             headerCellClassName ? headerCellClassName(col, context) : '',

  14.                             getFixedClass(col)

  15.                         ]" :style="headerColStyle(col)" @click="handleHeaderClick(col)">

  16.                         <slot name="header" :column="col" :columnIndex="colIndex" :level="1" :context="context">

  17.                         </slot>

  18.                         <text v-if="!$slots['header']">{{ col.title }}</text>

  19.                         <template v-if="isColumnSortable(col)">

  20.                             <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"

  21.                                 :columnIndex="colIndex" :level="1" :context="context">

  22.                             </slot>

  23.                             <view v-if="!$slots['headerSort']">

  24.                                 {{ getSortIcon(col.key) }}

  25.                             </view>

  26.                         </template>

  27.                     </view>

  28.                 </view>

  29.             </view>

  30. 

  31.             <!-- 表体 -->

  32.             <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">

  33.                 <template v-if="data && data.length > 0">

  34.                     <!-- #ifdef MP-WEIXIN -->

  35.                     <template v-for="(item, flatIndex) in flattenedSortedData" :key="item.row[rowKey] || flatIndex">

  36.                         <view class="u-table-row u-table-row-child" :class="[highlightCurrentRow && currentRow === item.row ? 'u-table-row-highlight' : '',

  37.                             rowClassName ? rowClassName(item.row, item.rowIndex, context) : '',

  38.                             stripe && flatIndex % 2 === 1 ? 'u-table-row-zebra' : ''

  39.                         ]" :style="[{ height: rowHeight }, getRowStyle(item.row, item.rowIndex, item.level, item.parentRow)]" @click="handleRowClick(item.row)">

  40.                             <view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"

  41.                                 :class="[col.align ? 'u-text-' + col.align : '',

  42.                                     cellClassName ? cellClassName(item.row, col, context) : '',

  43.                                     getFixedClass(col),

  44.                                     isOverflowTooltipEnabled(col) ? 'u-table-cell-overflow' : '',

  45.                                     getCellSpanClass(item.row, col, item.rowIndex, colIndex)

  46.                                 ]"

  47.                                 :style="[cellStyleInner({ row: item.row, column: col, rowIndex: item.rowIndex, columnIndex: colIndex, level: item.level }), getCellSpanStyle(item.row, col, item.rowIndex, colIndex)]">

  48.                                 <view v-if="col.type === 'selection'">

  49.                                     <checkbox :checked="isSelected(item.row)" @click.stop="toggleSelect(item.row)" />

  50.                                 </view>

  51.                                 <template v-else>

  52.                                     <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row, item.level)"

  53.                                         :style="{ width: expandWidth }">

  54.                                         <view v-if="hasExpandableChildren(item.row)">

  55.                                             {{ isLazyLoading(item.row) ? '...' : (isExpanded(item.row) ? '▼' : '▶') }}

  56.                                         </view>

  57.                                     </view>

  58.                                     <view class="u-table-cell_content"

  59.                                         :class="{ 'u-table-cell_content-overflow': isOverflowTooltipEnabled(col) }">

  60.                                         <slot name="cell" :row="item.row" :column="col" :prow="item.parentRow"

  61.                                             :rowIndex="item.rowIndex" :columnIndex="colIndex" :level="item.level" :context="context">

  62.                                             <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(col) }" :lines="isOverflowTooltipEnabled(col) ? 1 : undefined">

  63.                                                 {{ item.row[col.key] }}

  64.                                             </text>

  65.                                         </slot>

  66.                                     </view>

  67.                                 </template>

  68.                             </view>

  69.                         </view>

  70.                     </template>

  71.                     <!-- #endif -->

  72.                     <!-- #ifndef MP-WEIXIN -->

  73.                     <table-row 

  74.                         v-for="(row, rowIndex) in sortedData"

  75.                         :key="row[rowKey] || rowIndex"

  76.                         :row="row" 

  77.                         :rowIndex="rowIndex"

  78.                         :parent-row="null"

  79.                         :columns="columns"

  80.                         :tree-props="treeProps"

  81.                         :row-key="rowKey"

  82.                         :expanded-keys="expandedKeys"

  83.                         :cell-style-inner="cellStyleInner"

  84.                         :is-expanded="isExpanded"

  85.                         :row-class-name="rowClassName"

  86.                         :row-style="rowStyle"

  87.                         :stripe="stripe"

  88.                         :cell-class-name="cellClassName"

  89.                         :get-fixed-class="getFixedClass"

  90.                         :context="context"

  91.                         :highlight-current-row="highlightCurrentRow"

  92.                         :current-row="currentRow"

  93.                         :handle-row-click="handleRowClick"

  94.                         :toggle-expand="toggleExpand"

  95.                         :level="1"

  96.                         :rowHeight="rowHeight"

  97.                         :hasTree="hasTree"

  98.                         :selectedRows="selectedRows"

  99.                         :expandWidth="expandWidth"

  100.                         :computedMainCol="computedMainCol"

  101.                         :span-method="spanMethod"

  102.                         :show-overflow-tooltip="showOverflowTooltip"

  103.                         :has-expandable-children="hasExpandableChildren"

  104.                         :is-lazy-loading="isLazyLoading"

  105.                         @toggle-select="toggleSelect"

  106.                         @row-click="handleRowClick"

  107.                         @toggle-expand="toggleExpand"

  108.                     >

  109.                         <template v-slot:cellChild="scope">

  110.                             <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"

  111.                                 :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level" :context="context">

  112.                                 <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(scope.column) }" :lines="isOverflowTooltipEnabled(scope.column) ? 1 : undefined">

  113.                                     {{ scope.row[scope.column.key] }}

  114.                                 </text>

  115.                             </slot>                      

  116.                         </template>

  117.                     </table-row>

  118.                     <!-- #endif -->

  119.                 </template>

  120.                 <template v-else>

  121.                     <slot name="empty">

  122.                     </slot>

  123.                     <view v-if="!$slots['empty']" class="u-table-empty">{{ emptyText }}</view>

  124.                 </template>

  125.             </view>

  126.         </scroll-view>

  127.         

  128.         <!-- 固定列浮动视图 -->

  129.         <view v-if="showFixedColumnShadow" class="u-table-fixed-shadow" :style="{ height: tableHeight }">

  130.             <!-- 表头 -->

  131.             <view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">

  132.                 <view class="u-table-row" :style="{height: headerHeight}">

  133.                     <view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"

  134.                         :style="headerColStyle(col)"

  135.                         :class="[col.align ? 'u-text-' + col.align : '',

  136.                             headerCellClassName ? headerCellClassName(col, context) : '',

  137.                             getFixedClass(col)

  138.                         ]" @click="handleHeaderClick(col)">

  139.                         <slot name="header" :column="col" :columnIndex="colIndex" :level="1" :context="context">

  140.                         </slot>

  141.                         <text v-if="!$slots['header']">{{ col.title }}</text>

  142.                         <template v-if="isColumnSortable(col)">

  143.                             <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col"

  144.                                 :columnIndex="colIndex" :level="1" :context="context">

  145.                             </slot>

  146.                             <view v-if="!$slots['headerSort']">

  147.                                 {{ getSortIcon(col.key) }}

  148.                             </view>

  149.                         </template>

  150.                     </view>

  151.                 </view>

  152.             </view>

  153. 

  154.             <!-- 表体 -->

  155.             <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">

  156.                 <template v-if="data && data.length > 0">

  157.                     <!-- #ifdef MP-WEIXIN -->

  158.                     <template v-for="(item, flatIndex) in flattenedSortedData" :key="item.row[rowKey] || flatIndex">

  159.                         <view class="u-table-row u-table-row-child" :class="[highlightCurrentRow && currentRow === item.row ? 'u-table-row-highlight' : '',

  160.                             rowClassName ? rowClassName(item.row, item.rowIndex, context) : '',

  161.                             stripe && flatIndex % 2 === 1 ? 'u-table-row-zebra' : ''

  162.                         ]" :style="[{ height: rowHeight }, getRowStyle(item.row, item.rowIndex, item.level, item.parentRow)]" @click="handleRowClick(item.row)">

  163.                             <view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"

  164.                                 :class="[col.align ? 'u-text-' + col.align : '',

  165.                                     cellClassName ? cellClassName(item.row, col, context) : '',

  166.                                     getFixedClass(col),

  167.                                     isOverflowTooltipEnabled(col) ? 'u-table-cell-overflow' : '',

  168.                                     getCellSpanClass(item.row, col, item.rowIndex, colIndex)

  169.                                 ]"

  170.                                 :style="[cellStyleInner({ row: item.row, column: col, rowIndex: item.rowIndex, columnIndex: colIndex, level: item.level }), getCellSpanStyle(item.row, col, item.rowIndex, colIndex)]">

  171.                                 <view v-if="col.type === 'selection'">

  172.                                     <checkbox :checked="isSelected(item.row)" @click.stop="toggleSelect(item.row)" />

  173.                                 </view>

  174.                                 <template v-else>

  175.                                     <view v-if="col.key === computedMainCol && hasTree" @click.stop="toggleExpand(item.row, item.level)"

  176.                                         :style="{ width: expandWidth }">

  177.                                         <view v-if="hasExpandableChildren(item.row)">

  178.                                             {{ isLazyLoading(item.row) ? '...' : (isExpanded(item.row) ? '▼' : '▶') }}

  179.                                         </view>

  180.                                     </view>

  181.                                     <!-- 固定列浮动视图直接内联渲染，不使用 slot，避免与主表体 slot name="cell" 重名报错（微信小程序限制） -->

  182.                                     <view class="u-table-cell_content"

  183.                                         :class="{ 'u-table-cell_content-overflow': isOverflowTooltipEnabled(col) }">

  184.                                         <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(col) }" :lines="isOverflowTooltipEnabled(col) ? 1 : undefined">

  185.                                             {{ item.row[col.key] }}

  186.                                         </text>

  187.                                     </view>

  188.                                 </template>

  189.                             </view>

  190.                         </view>

  191.                     </template>

  192.                     <!-- #endif -->

  193.                     <!-- #ifndef MP-WEIXIN -->

  194.                     <template v-for="(row, rowIndex) in sortedData" :key="row[rowKey] || rowIndex">

  195.                         <!-- 子级渲染 (递归组件) -->

  196.                         <table-row 

  197.                             :row="row" 

  198.                             :rowIndex="rowIndex"

  199.                             :parent-row="null"

  200.                             :columns="visibleFixedLeftColumns"

  201.                             :tree-props="treeProps"

  202.                             :row-key="rowKey"

  203.                             :expanded-keys="expandedKeys"

  204.                             :cell-style-inner="cellStyleInner"

  205.                             :is-expanded="isExpanded"

  206.                             :row-class-name="rowClassName"

  207.                             :row-style="rowStyle"

  208.                             :stripe="stripe"

  209.                             :cell-class-name="cellClassName"

  210.                             :get-fixed-class="getFixedClass"

  211.                             :context="context"

  212.                             :highlight-current-row="highlightCurrentRow"

  213.                             :current-row="currentRow"

  214.                             :handle-row-click="handleRowClick"

  215.                             :toggle-expand="toggleExpand"

  216.                             :level="1"

  217.                             :rowHeight="rowHeight"

  218.                             :hasTree="hasTree"

  219.                             :selectedRows="selectedRows"

  220.                             :expandWidth="expandWidth"

  221.                             :computedMainCol="computedMainCol"

  222.                             :span-method="spanMethod"

  223.                             :show-overflow-tooltip="showOverflowTooltip"

  224.                             :has-expandable-children="hasExpandableChildren"

  225.                             :is-lazy-loading="isLazyLoading"

  226.                             @toggle-select="toggleSelect"

  227.                             @row-click="handleRowClick"

  228.                             @toggle-expand="toggleExpand"

  229.                         >

  230.                             <template v-slot:cellChild="scope">

  231.                                 <slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"

  232.                                     :rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level" :context="context">

  233.                                     <text class="u-table-cell_text" :class="{ 'u-line-1': isOverflowTooltipEnabled(scope.column) }" :lines="isOverflowTooltipEnabled(scope.column) ? 1 : undefined">

  234.                                         {{ scope.row[scope.column.key] }}

  235.                                     </text>

  236.                                 </slot>                      

  237.                             </template>

  238.                         </table-row>

  239.                     </template>

  240.                     <!-- #endif -->

  241.                 </template>

  242.             </view>

  243.         </view>

  244.     </view>

  245. </template>

  246. 

  247. <script>

  248. import { addUnit, sleep } from '../../libs/function/index';

  249. import tableRow from './tableRow.vue'; // 引入递归组件

  250. 

  251. export default {

  252.     name: 'u-table2',

  253.     components: {

  254.         tableRow // 注册递归组件

  255.     },

  256.     props: {

  257.         data: {

  258.             type: Array,

  259.             required: true,

  260.             default: () => {

  261.                 return []

  262.             }

  263.         },

  264.         columns: {

  265.             type: Array,

  266.             required: true,

  267.             default: () => {

  268.                 return []

  269.             },

  270.             validator: cols =>

  271.                 cols.every(col =>

  272.                     ['default', 'selection', 'expand'].includes(col.type || 'default')

  273.                 )

  274.         },

  275.         stripe: {

  276.             type: Boolean,

  277.             default: false

  278.         },

  279.         border: {

  280.             type: Boolean,

  281.             default: false

  282.         },

  283.         height: {

  284.             type: [String, Number],

  285.             default: null

  286.         },

  287.         maxHeight: {

  288.             type: [String, Number],

  289.             default: null

  290.         },

  291.         showHeader: {

  292.             type: Boolean,

  293.             default: true

  294.         },

  295.         highlightCurrentRow: {

  296.             type: Boolean,

  297.             default: false

  298.         },

  299.         rowKey: {

  300.             type: String,

  301.             default: 'id'

  302.         },

  303.         currentRowKey: {

  304.             type: [String, Number],

  305.             default: null

  306.         },

  307.         rowStyle: {

  308.             type: [Object, Function],

  309.             default: () => ({})

  310.         },

  311.         cellClassName: {

  312.             type: Function,

  313.             default: null

  314.         },

  315. 		cellStyle: {

  316. 		    type: Function,

  317. 		    default: null

  318. 		},

  319.         headerCellClassName: {

  320.             type: Function,

  321.             default: null

  322.         },

  323.         rowClassName: {

  324.             type: Function,

  325.             default: null

  326.         },

  327.         context: {

  328.             type: Object,

  329.             default: null

  330.         },

  331.         showOverflowTooltip: {

  332.             type: [Boolean, Object],

  333.             default: false

  334.         },

  335.         lazy: {

  336.             type: Boolean,

  337.             default: false

  338.         },

  339.         load: {

  340.             type: Function,

  341.             default: null

  342.         },

  343.         treeProps: {

  344.             type: Object,

  345.             default: () => ({

  346.                 children: 'children',

  347.                 hasChildren: 'hasChildren'

  348.             })

  349.         },

  350.         defaultExpandAll: {

  351.             type: Boolean,

  352.             default: false

  353.         },

  354.         expandRowKeys: {

  355.             type: Array,

  356.             default: () => []

  357.         },

  358.         sortOrders: {

  359.             type: Array,

  360.             default: () => ['ascending', 'descending']

  361.         },

  362.         sortable: {

  363.             type: [Boolean, String],

  364.             default: false

  365.         },

  366.         multiSort: {

  367.             type: Boolean,

  368.             default: false

  369.         },

  370.         sortBy: {

  371.             type: String,

  372.             default: null

  373.         },

  374.         sortMethod: {

  375.             type: Function,

  376.             default: null

  377.         },

  378.         filters: {

  379.             type: Object,

  380.             default: () => ({})

  381.         },

  382.         fixedHeader: {

  383.             type: Boolean,

  384.             default: true

  385.         },

  386.         emptyText: {

  387.             type: String,

  388.             default: '暂无数据'

  389.         },

  390.         // 添加mainCol属性，用于指定树形结构展开控制图标所在的列

  391.         mainCol: {

  392.             type: String,

  393.             default: ''

  394.         },

  395.         expandWidth: {

  396.             type: String,

  397.             default: '25px'

  398.         },

  399.         rowHeight: {

  400.             type: String,

  401.             default: '36px'

  402.         },

  403.         // 添加spanMethod属性，用于合并单元格

  404.         spanMethod: {

  405.             type: Function,

  406.             default: null

  407.         }

  408.     },

  409.     emits: [

  410.         'select', 'select-all', 'selection-change',

  411.         'cell-click', 'row-click', 'row-dblclick',

  412.         'header-click', 'sort-change', 'filter-change',

  413.         'current-change', 'expand-change'

  414.     ],

  415.     data() {

  416.         return {

  417.             scrollWidth: 'auto',

  418.             // 将setup中的ref转换为data属性

  419.             expandedKeys: [...this.expandRowKeys],

  420.             selectedRows: [],

  421.             sortConditions: [],

  422.             currentRow: null,

  423.             scrollLeft: 0, // 新增滚动位置数据

  424.             showFixedColumnShadow: false, // 是否显示固定列阴影

  425.             fixedLeftColumns: [], // 左侧固定列

  426.             tableHeight: 'auto', // 表格高度

  427.             headerHeight: 'auto', // 新增表头高度属性

  428.             hasTree: false, // 新增属性，用于判断是否存在树形结构

  429.             lazyLoadingKeys: []

  430.         }

  431.     },

  432.     mounted() {

  433.         this.getComponentWidth()

  434.         this.initDefaultExpandAll()

  435.         // 处理currentRowKey初始化

  436.         if (this.currentRowKey !== null) {

  437.             const found = this.data.find(item => item[this.rowKey] === this.currentRowKey);

  438.             if (found) {

  439.                 this.currentRow = found;

  440.             }

  441.         }

  442.         // 获取固定列

  443.         this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');

  444.     },

  445.     computed: {

  446.         // 将setup中的computed转换为computed属性

  447.         filteredData() {

  448.             return this.data.filter(row => {

  449.                 return Object.keys(this.filters).every(key => {

  450.                     const filter = this.filters[key];

  451.                     if (!filter) return true;

  452.                     return row[key]?.toString().includes(filter.toString());

  453.                 });

  454.             });

  455.         },

  456.         sortedData() {

  457.             if (!this.sortConditions.length) return this.filteredData;

  458. 

  459.             const data = [...this.filteredData];

  460. 

  461.             return data.sort((a, b) => {

  462.                 for (const condition of this.sortConditions) {

  463.                     const { field, order, column } = condition;

  464.                     const sortBy = column ? this.getColumnSortBy(column) : this.sortBy;

  465.                     let valA = this.getSortValueBy(a, field, sortBy);

  466.                     let valB = this.getSortValueBy(b, field, sortBy);

  467. 

  468.                     if (this.sortMethod) {

  469.                         const result = this.sortMethod(a, b, field, this.context);

  470.                         if (result !== 0) return result * (order === 'ascending' ? 1 : -1);

  471.                     }

  472. 

  473.                     if (valA < valB) return order === 'ascending' ? -1 : 1;

  474.                     if (valA > valB) return order === 'ascending' ? 1 : -1;

  475.                 }

  476.                 return 0;

  477.             });

  478.         },

  479.         flattenedSortedData() {

  480.             const result = [];

  481.             const childrenKey = this.treeProps.children;

  482. 

  483.             const walk = (rows, parentRow = null, level = 1) => {

  484.                 if (!Array.isArray(rows) || rows.length === 0) return;

  485.                 rows.forEach((row, rowIndex) => {

  486.                     result.push({ row, parentRow, level, rowIndex });

  487.                     const children = row && row[childrenKey];

  488.                     if (children && children.length > 0 && this.isExpanded(row)) {

  489.                         walk(children, row, level + 1);

  490.                     }

  491.                 });

  492.             };

  493. 

  494.             walk(this.sortedData);

  495.             return result;

  496.         },

  497.         // 计算当前应该显示的固定左侧列

  498.         visibleFixedLeftColumns() {

  499.             if (this.scrollLeft <= 0) {

  500.                 return [];

  501.             }

  502.             

  503.             let totalWidth = 0;

  504.             let fixedWidth = 0;

  505.             const visibleColumns = [];

  506.             

  507.             // 遍历所有列，不仅仅是固定列

  508.             for (let i = 0; i < this.columns.length; i++) {

  509.                 const col = this.columns[i];

  510.                 const colWidth = col.width ? parseInt(col.width) : 100; // 默认宽度100px

  511.                 

  512.                 // 如果是固定列且滚动位置足够显示该列

  513.                 if (col.fixed === 'left' && this.scrollLeft > totalWidth - fixedWidth) {

  514.                     visibleColumns.push(col);

  515.                     fixedWidth += colWidth;

  516.                 }

  517.                 

  518.                 totalWidth += colWidth;

  519.             }

  520.             

  521.             return visibleColumns;

  522.         },

  523.         // 获取mainCol的值，如果未设置则默认为第一列的key

  524.         computedMainCol() {

  525.             if (this.mainCol) {

  526.                 return this.mainCol;

  527.             }

  528.             // 修改为排除有type值的列

  529.             const validColumns = this.columns.filter(col => !col.type);

  530.             let mainCol = validColumns && validColumns.length > 0 ? validColumns[0].key : '';

  531.             // console.log('mainCol', mainCol)

  532.             return mainCol;

  533.         }

  534.     },

  535.     watch: {

  536.         // 将setup中的watch转换为watch属性

  537.         expandRowKeys: {

  538.             handler(newVal) {

  539.                 this.expandedKeys = [...newVal];

  540.                 this.initDefaultExpandAll();

  541.             },

  542.             immediate: true

  543.         },

  544.         currentRowKey: {

  545.             handler(newVal) {

  546.                 const found = this.data.find(item => item[this.rowKey] === newVal);

  547.                 if (found) {

  548.                     this.currentRow = found;

  549.                 }

  550.             },

  551.             immediate: true

  552.         },

  553.         columns: {

  554.             handler() {

  555.                 // this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');

  556.             },

  557.             deep: true,

  558.             immediate: false

  559.         },

  560.         data: {

  561.             handler() {

  562.                 this.initDefaultExpandAll();

  563.             },

  564.             deep: true

  565.         },

  566.         defaultExpandAll() {

  567.             this.initDefaultExpandAll();

  568.         }

  569.     },

  570.     methods: {

  571.         addUnit,

  572.         isSelected(row) {

  573.             return this.selectedRows.some(r => r[this.rowKey] === row[this.rowKey]);

  574.         },

  575.         getCellSpan(row, column, rowIndex, columnIndex) {

  576.             if (typeof this.spanMethod !== 'function') {

  577.                 return { rowspan: 1, colspan: 1 };

  578.             }

  579. 

  580.             const result = this.spanMethod({

  581.                 row,

  582.                 column,

  583.                 rowIndex,

  584.                 columnIndex,

  585.                 context: this.context

  586.             });

  587. 

  588.             if (Array.isArray(result)) {

  589.                 const [rowspan, colspan] = result;

  590.                 return { rowspan: rowspan != null ? rowspan : 1, colspan: colspan != null ? colspan : 1 };

  591.             }

  592. 

  593.             if (result && typeof result === 'object') {

  594.                 const { rowspan, colspan } = result;

  595.                 return { rowspan: rowspan != null ? rowspan : 1, colspan: colspan != null ? colspan : 1 };

  596.             }

  597. 

  598.             return { rowspan: 1, colspan: 1 };

  599.         },

  600.         getCellSpanClass(row, column, rowIndex, columnIndex) {

  601.             const span = this.getCellSpan(row, column, rowIndex, columnIndex);

  602.             if (span.rowspan === 0 || span.colspan === 0) {

  603.                 return 'u-table-cell-hidden';

  604.             }

  605.             if (span.rowspan > 1 || span.colspan > 1) {

  606.                 return 'u-table-cell-merged';

  607.             }

  608.             return '';

  609.         },

  610.         getCellSpanStyle(row, column, rowIndex, columnIndex) {

  611.             const span = this.getCellSpan(row, column, rowIndex, columnIndex);

  612.             const style = {};

  613. 

  614.             if (span.rowspan > 1) {

  615.                 const currentHeight = parseInt(this.rowHeight);

  616.                 if (!isNaN(currentHeight)) {

  617.                     style.height = `${span.rowspan * currentHeight}px`;

  618.                 }

  619.             }

  620. 

  621.             if (span.colspan > 1) {

  622.                 style.flex = span.colspan;

  623.             }

  624. 

  625.             if (span.rowspan === 0 || span.colspan === 0) {

  626.                 style.display = 'none';

  627.             }

  628. 

  629.             return style;

  630.         },

  631.         getRowStyle(row, rowIndex, level = 1, parentRow = null) {

  632.             if (typeof this.rowStyle === 'function') {

  633.                 return this.rowStyle({ row, rowIndex, level, parentRow, context: this.context }) || {};

  634.             }

  635.             return this.rowStyle || {};

  636.         },

  637.         onScroll(e) {

  638.             this.scrollLeft = e.detail.scrollLeft;

  639.             // 获取所有左侧固定列

  640.             this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');

  641.             // 计算是否需要显示固定列阴影

  642.             if (this.fixedLeftColumns.length > 0) {

  643.                 this.showFixedColumnShadow = this.scrollLeft > 0;

  644.             }

  645.         },

  646.         

  647.         getFixedShadowStyle(col, index) {

  648.             let style = {

  649.                 width: col.width ? addUnit(col.width) : 'auto',

  650.             };

  651.             

  652.             if (col?.style) {

  653.                 style = {...style, ...col?.style};

  654.             }

  655.             

  656.             return style;

  657.         },

  658.         

  659.         getFixedClass(col) {

  660.             return ''; // 不再使用原来的固定列样式类

  661.         },

  662. 

  663.         isOverflowTooltipEnabled(column) {

  664.             if (column && column.type === 'selection') {

  665.                 return false;

  666.             }

  667.             if (column && typeof column.showOverflowTooltip !== 'undefined') {

  668.                 return !!column.showOverflowTooltip;

  669.             }

  670.             return !!this.showOverflowTooltip;

  671.         },

  672. 

  673.         isColumnSortable(column) {

  674.             return typeof column.sortable !== 'undefined' ? !!column.sortable : !!this.sortable;

  675.         },

  676. 

  677.         getColumnSortBy(column) {

  678.             if (typeof column.sortBy !== 'undefined') {

  679.                 return column.sortBy;

  680.             }

  681.             return this.sortBy;

  682.         },

  683. 

  684.         getColumnSortOrders(column) {

  685.             if (Array.isArray(column.sortOrders) && column.sortOrders.length > 0) {

  686.                 return column.sortOrders;

  687.             }

  688.             return this.sortOrders;

  689.         },

  690. 

  691.         getSortValueBy(row, field, sortBy) {

  692.             if (typeof sortBy === 'function') {

  693.                 return sortBy(row);

  694.             }

  695.             if (Array.isArray(sortBy) && sortBy.length > 0) {

  696.                 return sortBy.map(key => row[key]).join('');

  697.             }

  698.             if (typeof sortBy === 'string' && sortBy) {

  699.                 return row[sortBy];

  700.             }

  701.             return row[field];

  702.         },

  703. 

  704.         hasExpandableChildren(row) {

  705.             if (!row) {

  706.                 return false;

  707.             }

  708.             const children = row[this.treeProps.children];

  709.             return (Array.isArray(children) && children.length > 0) || !!row[this.treeProps.hasChildren];

  710.         },

  711. 

  712.         isLazyLoading(row) {

  713.             return this.lazyLoadingKeys.includes(row[this.rowKey]);

  714.         },

  715. 

  716.         initDefaultExpandAll() {

  717.             if (!this.defaultExpandAll) {

  718.                 return;

  719.             }

  720.             const keys = [];

  721.             const childrenKey = this.treeProps.children;

  722.             const walk = (rows) => {

  723.                 if (!Array.isArray(rows)) {

  724.                     return;

  725.                 }

  726.                 rows.forEach(row => {

  727.                     if (!row) {

  728.                         return;

  729.                     }

  730.                     if (this.hasExpandableChildren(row)) {

  731.                         keys.push(row[this.rowKey]);

  732.                     }

  733.                     walk(row[childrenKey]);

  734.                 });

  735.             };

  736.             walk(this.data);

  737.             this.expandedKeys = Array.from(new Set([...this.expandedKeys, ...keys]));

  738.         },

  739. 

  740.         headerColStyle(col) {

  741.             let style = {

  742.                 width: col.width ? addUnit(col.width) : 'auto',

  743.                 flex: col.width ? 'none' : 1

  744.             };

  745.             if (col?.style) {

  746.                 style = {...style, ...col?.style};

  747.             }

  748.             return style;

  749.         },

  750.         

  751. 		setCellStyle(e) {

  752. 			this.cellStyle = e

  753. 		},

  754. 		cellStyleInner(scope) {

  755. 			let style = {

  756. 				width: scope.column?.width ? addUnit(scope.column.width) : 'auto',

  757. 				flex: scope.column?.width ? 'none' : 1

  758. 			};

  759.             // 只有展开列设置padding

  760.             if (scope.column.key == this.computedMainCol) {

  761.                 style.paddingLeft = (16 * (scope.level -1 )) + 2 + 'px'

  762.             }

  763. 			if (this.cellStyle != null) {

  764. 				let styleCalc = this.cellStyle({...scope, context: this.context})

  765. 				if (styleCalc != null) {

  766. 					style = {...style, ...styleCalc}

  767. 				}

  768. 			}

  769. 			return style;

  770. 		},

  771.         // 获取组件的宽度

  772. 		async getComponentWidth() {

  773. 			// 延时一定时间，以获取dom尺寸

  774. 			await sleep(30)

  775. 			this.$uGetRect('.u-table-row').then(size => {

  776. 				this.scrollWidth = size.width + 'px'

  777. 			})

  778.             

  779.             // 获取表头高度并设置

  780.             this.$uGetRect('.u-table-header').then(size => {

  781.                 if (size.height) {

  782.                     this.headerHeight = size.height + 'px';

  783.                 }

  784.             })

  785.             

  786.             // 遍历数据列表第一层判断是否存在树形结构

  787.             this.hasTree = this.sortedData.some(item => {

  788.                 return item[this.treeProps.children] && item[this.treeProps.children].length > 0;

  789.             });

  790. 		},

  791.         // 将setup中的函数转换为methods

  792.         handleRowClick(row) {

  793.             if (this.highlightCurrentRow) {

  794.                 const oldRow = this.currentRow;

  795.                 this.currentRow = row;

  796.                 this.$emit('current-change', row, oldRow);

  797.             }

  798.             this.$emit('row-click', row);

  799.         },

  800.         handleHeaderClick(column) {

  801.             if (!this.isColumnSortable(column)) return;

  802. 

  803.             const index = this.sortConditions.findIndex(c => c.field === column.key);

  804.             const sortOrders = this.getColumnSortOrders(column).filter(Boolean);

  805.             let newOrder = sortOrders[0] || 'ascending';

  806. 

  807.             if (index >= 0) {

  808.                 const currentOrder = this.sortConditions[index].order;

  809.                 const nextIndex = sortOrders.indexOf(currentOrder) + 1;

  810.                 if (nextIndex > 0 && nextIndex < sortOrders.length) {

  811.                     newOrder = sortOrders[nextIndex];

  812.                 } else {

  813.                     this.sortConditions.splice(index, 1);

  814.                     this.$emit('sort-change', this.sortConditions);

  815.                     return;

  816.                 }

  817.             }

  818. 

  819.             if (!this.multiSort) {

  820.                 this.sortConditions = [{ field: column.key, order: newOrder, column }];

  821.             } else {

  822.                 if (index >= 0) {

  823.                     this.sortConditions[index].order = newOrder;

  824.                     this.sortConditions[index].column = column;

  825.                 } else {

  826.                     this.sortConditions.push({ field: column.key, order: newOrder, column });

  827.                 }

  828.             }

  829. 

  830.             this.$emit('sort-change', this.sortConditions);

  831.         },

  832.         getSortIcon(field) {

  833.             const cond = this.sortConditions.find(c => c.field === field);

  834.             if (!cond) return '';

  835.             return cond.order === 'ascending' ? '↑' : '↓';

  836.         },

  837.         getSortValue(field) {

  838.             const cond = this.sortConditions.find(c => c.field === field);

  839.             if (!cond) return '';

  840.             return cond.order === 'ascending';

  841.         },

  842.         toggleSelect(row) {

  843.             const index = this.selectedRows.findIndex(r => r[this.rowKey] === row[this.rowKey]);

  844.             if (index >= 0) {

  845.                 // 取消选中当前行及其所有子节点

  846.                 this.selectedRows.splice(index, 1);

  847.                 // 递归取消所有子节点

  848.                 this.unselectChildren(row);

  849.             } else {

  850.                 // 选中当前行及其所有子节点

  851.                 this.selectedRows.push(row);

  852.                 // 递归选中所有子节点

  853.                 this.selectChildren(row);

  854.             }

  855.             console.log(this.selectedRows)

  856.             this.$emit('selection-change', this.selectedRows);

  857.             this.$emit('select', row);

  858.         },

  859.         toggleExpand(row, level = 1) {

  860.             // console.log(row)

  861.             const key = row[this.rowKey];

  862.             const index = this.expandedKeys.indexOf(key);

  863.             if (index === -1) {

  864.                 this.expandedKeys.push(key);

  865.                 this.loadLazyChildren(row, level);

  866.             } else {

  867.                 this.expandedKeys.splice(index, 1);

  868.             }

  869.             this.$emit('expand-change', this.expandedKeys);

  870.         },

  871.         loadLazyChildren(row, level = 1) {

  872.             if (!this.lazy || typeof this.load !== 'function') {

  873.                 return;

  874.             }

  875.             const childrenKey = this.treeProps.children;

  876.             const key = row[this.rowKey];

  877.             const children = row[childrenKey];

  878.             if ((Array.isArray(children) && children.length > 0) || this.lazyLoadingKeys.includes(key)) {

  879.                 return;

  880.             }

  881. 

  882.             this.lazyLoadingKeys.push(key);

  883.             const resolve = (childrenList = []) => {

  884.                 row[childrenKey] = Array.isArray(childrenList) ? childrenList : [];

  885.                 this.lazyLoadingKeys = this.lazyLoadingKeys.filter(item => item !== key);

  886.                 this.getComponentWidth();

  887.             };

  888. 

  889.             const result = this.load(row, {

  890.                 row,

  891.                 level,

  892.                 expanded: this.isExpanded(row),

  893.                 loading: true,

  894.                 context: this.context

  895.             }, resolve);

  896. 

  897.             if (result && typeof result.then === 'function') {

  898.                 result.then(resolve).catch(() => {

  899.                     this.lazyLoadingKeys = this.lazyLoadingKeys.filter(item => item !== key);

  900.                 });

  901.             }

  902.         },

  903.         isExpanded(row) {

  904.             if (!row) {

  905.                 return false;

  906.             }

  907.             return this.expandedKeys.includes(row[this.rowKey]);

  908.         },

  909.         // 新增方法：递归选中所有子节点

  910.         selectChildren(row) {

  911.             const children = row[this.treeProps.children];

  912.             if (children && children.length > 0) {

  913.                 children.forEach(child => {

  914.                     // 检查是否已选中，避免重复添加

  915.                     const childIndex = this.selectedRows.findIndex(r => r[this.rowKey] === child[this.rowKey]);

  916.                     if (childIndex === -1) {

  917.                         this.selectedRows.push(child);

  918.                     }

  919.                     // 递归处理子节点的子节点

  920.                     this.selectChildren(child);

  921.                 });

  922.             }

  923.         },

  924.         // 新增方法：递归取消选中所有子节点

  925.         unselectChildren(row) {

  926.             const children = row[this.treeProps.children];

  927.             if (children && children.length > 0) {

  928.                 children.forEach(child => {

  929.                     const childIndex = this.selectedRows.findIndex(r => r[this.rowKey] === child[this.rowKey]);

  930.                     if (childIndex >= 0) {

  931.                         this.selectedRows.splice(childIndex, 1);

  932.                     }

  933.                     // 递归处理子节点的子节点

  934.                     this.unselectChildren(child);

  935.                 });

  936.             }

  937.         },

  938.     }

  939. };

  940. </script>

  941. 

  942. <style lang="scss" scoped>

  943. .u-table2 {

  944.     width: auto;

  945.     overflow: auto;

  946.     white-space: nowrap;

  947.     position: relative;

  948.     color: var(--up-content-color, #606266);

  949.     background-color: var(--up-card-bg-color, #ffffff);

  950. 

  951.     .u-table-header {

  952.         min-width: 100% !important;

  953.         width: fit-content;

  954.         background-color: var(--up-table2-header-bg-color, var(--up-bg-color, #f5f7fa));

  955.         color: var(--up-main-color, #303133);

  956.     }

  957. 

  958.     .u-table-body {

  959.         min-width: 100% !important;

  960.         width: fit-content;

  961.         position: relative;

  962.         background-color: var(--up-card-bg-color, #ffffff);

  963.     }

  964. 

  965.     .u-table-sticky {

  966.         position: sticky;

  967.         top: 0;

  968.         z-index: 10;

  969.     }

  970. 

  971.     .u-table-row {

  972.         display: flex;

  973.         flex-direction: row;

  974.         overflow: hidden;

  975.         position: relative;

  976.         // min-height: 40px;

  977.     }

  978. 

  979.     // 添加border样式支持

  980.     &.u-table-border {

  981.         border-top: 1px solid var(--up-border-color, #ebeef5);

  982.         border-left: 1px solid var(--up-border-color, #ebeef5);

  983.         border-right: 1px solid var(--up-border-color, #ebeef5);

  984.         .u-table-cell {

  985.             border-right: 1px solid var(--up-border-color, #ebeef5);

  986.         }

  987.         

  988.         .u-table-cell:last-child {

  989.             border-right: none;

  990.         }

  991.     }

  992. 

  993.     .u-table-cell {

  994.         flex: 1;

  995.         display: flex;

  996.         flex-direction: row;

  997.         align-items: center;

  998.         min-width: 0;

  999.         box-sizing: border-box;

  1000.         padding: 10px 1px;

  1001.         font-size: 14px;

  1002.         white-space: nowrap;

  1003.         overflow: hidden;

  1004.         text-overflow: ellipsis;

  1005.         line-height: 1.1;

  1006.         color: var(--up-content-color, #606266);

  1007.         border-bottom: 1px solid var(--up-border-color, #ebeef5);

  1008.         &.u-text-left {

  1009.             justify-content: flex-start;

  1010.             text-align: left;

  1011.         }

  1012.         &.u-text-center {

  1013.             justify-content: center;

  1014.             text-align: center;

  1015.         }

  1016.         &.u-text-right {

  1017.             justify-content: flex-end;

  1018.             text-align: right;

  1019.         }

  1020.     }

  1021. 

  1022.     .u-table-cell_content {

  1023.         width: 100%;

  1024.         min-width: 0;

  1025.         max-width: 100%;

  1026.         flex: 1;

  1027.         box-sizing: border-box;

  1028.         display: block;

  1029.         text-align: inherit;

  1030.     }

  1031. 

  1032.     .u-table-cell_text {

  1033.         width: 100%;

  1034.         min-width: 0;

  1035.         max-width: 100%;

  1036.         display: block;

  1037.         box-sizing: border-box;

  1038.         text-align: inherit;

  1039.     }

  1040. 

  1041.     .u-table-cell_content-overflow,

  1042.     .u-table-cell_content-overflow .u-table-cell_text {

  1043.         width: 100%;

  1044.         min-width: 0;

  1045.         max-width: 100%;

  1046.         display: block;

  1047.         overflow: hidden;

  1048.         text-overflow: ellipsis;

  1049.         white-space: nowrap;

  1050.     }

  1051. 

  1052.     .u-table-row-zebra {

  1053.         background-color: var(--up-table2-zebra-bg-color, rgba(255, 255, 255, 0.03));

  1054.     }

  1055. 

  1056.     .u-table-row-highlight {

  1057.         background-color: var(--up-table2-highlight-bg-color, var(--up-bg-color, #f5f7fa));

  1058.     }

  1059. 

  1060.     .u-table-empty {

  1061.         text-align: center;

  1062.         padding: 20px;

  1063.         color: var(--up-tips-color, #999);

  1064.     }

  1065. 

  1066.     .u-table-cell-hidden {

  1067.         opacity: 0;

  1068.     }

  1069. 

  1070.     .u-table-cell-merged {

  1071.         z-index: 1;

  1072.     }

  1073. }

  1074. 

  1075. // 固定列浮动视图

  1076. .u-table-fixed-shadow {

  1077.     position: absolute;

  1078.     top: 0;

  1079.     left: 0;

  1080.     width: auto;

  1081.     z-index: 20;

  1082.     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15);

  1083.     overflow: hidden;

  1084.     background-color: var(--up-card-bg-color, #ffffff);

  1085.     color: var(--up-content-color, #606266);

  1086. }

  1087. 

  1088. // .u-table-fixed-row {

  1089. //     display: flex;

  1090. //     flex-direction: row;

  1091. //     align-items: center;

  1092. //     border-bottom: 1rpx solid #ebeef5;

  1093. //     position: relative;

  1094. // }

  1095. 

  1096. // 为固定列也添加border样式支持

  1097. .u-table-fixed-shadow .u-table-border {

  1098.     .u-table-cell {

  1099.         border-right: 1rpx solid var(--up-border-color, #ebeef5);

  1100.     }

  1101.     

  1102.     .u-table-cell:last-child {

  1103.         border-right: none;

  1104.     }

  1105. }

  1106. </style>