theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛(component): 修复 table 工具栏 dropdown 随滚动条滚动

Browse Source
This commit is contained in:
就眠儀式 2022-08-09 01:16:24 +08:00
parent 212ce9a599
commit e05781963d
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
package/component/src/component/table/index.vue
View File

@ -97,7 +97,7 @@ const tableHeadColumns = ref<any[]>([]);
const tableBodyColumns = ref<any[]>([]); const tableBodyColumns = ref<any[]>([]);
/** /**
* 获取数组深度 * 获取数组深度
* *
* @param arr 数组 * @param arr 数组
*/ */
@ -120,8 +120,8 @@ const getLevel = (arr: any[]) => {
/** /**
* 获取叶节点的数量 * 获取叶节点的数量
* *
* @param json 当前节点 * @param json 当前节点
*/ */
function getLeafCountTree(json: any) { function getLeafCountTree(json: any) {
if (!json.children || json.children.length == 0) { if (!json.children || json.children.length == 0) {
@ -139,8 +139,8 @@ function getLeafCountTree(json: any) {
/** /**
* 计算内容列 * 计算内容列
* *
* @param columns 原始列 * @param columns 原始列
*/ */
const findFindNode = (columns: any[]) => { const findFindNode = (columns: any[]) => {
columns.forEach((column) => { columns.forEach((column) => {
@ -156,8 +156,8 @@ findFindNode(tableColumns.value);
/** /**
* 计算显示列 * 计算显示列
* *
* @param columns 原始列 * @param columns 原始列
*/ */
const tableColumnKeys = ref<any[]>([]); const tableColumnKeys = ref<any[]>([]);
@ -178,21 +178,21 @@ findFindNodes(tableColumns.value);
/** /**
* 计算数组差异 * 计算数组差异
* *
* @param arr1 数组 * @param arr1 数组
* @param arr2 数组 * @param arr2 数组
*/ */
function diff(arr1: any[], arr2: any[]) { function diff(arr1: any[], arr2: any[]) {
var newArr = []; var newArr = [];
arr1 = Array.from(new Set(arr1)); // 去重 arr1 = Array.from(new Set(arr1)); // 去重
arr2 = Array.from(new Set(arr2)); // 去重 arr2 = Array.from(new Set(arr2)); // 去重
newArr =arr1.concat(arr2); newArr = arr1.concat(arr2);
return newArr.filter(x=>!(arr1.includes(x) && arr2.includes(x))) return newArr.filter((x) => !(arr1.includes(x) && arr2.includes(x)));
} }
/** /**
* 计算标题列 * 计算标题列
* *
* @param level 层级, 用于决定会被 push 到的目标数组 * @param level 层级, 用于决定会被 push 到的目标数组
*/ */
const findFinalNode = (level: number, columns: any[]) => { const findFinalNode = (level: number, columns: any[]) => {
@ -560,7 +560,7 @@ const renderTotalRowCell = (column: any) => {
<slot name="toolbar"></slot> <slot name="toolbar"></slot>
</div> </div>
<div v-if="defaultToolbar" class="layui-table-tool-self"> <div v-if="defaultToolbar" class="layui-table-tool-self">
<lay-dropdown> <lay-dropdown updateAtScroll>
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_PRINT"> <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_PRINT">
<i class="layui-icon layui-icon-cols"></i> <i class="layui-icon layui-icon-cols"></i>
</div> </div>
@ -618,7 +618,12 @@ const renderTotalRowCell = (column: any) => {
</template> </template>
</colgroup> </colgroup>
<thead> <thead>
<template v-for="(tableHeadColumn, tableHeadColumnIndex) in tableHeadColumns" :key="tableHeadColumnIndex"> <template
v-for="(
tableHeadColumn, tableHeadColumnIndex
) in tableHeadColumns"
:key="tableHeadColumnIndex"
>
<tr> <tr>
<template <template
v-for="(column, columnIndex) in tableHeadColumn" v-for="(column, columnIndex) in tableHeadColumn"