From add05fa4aa95252ae3ee45e87f8c433d2daf198f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 15 Aug 2022 10:30:21 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E5=8F=91=E5=B8=83=201.?=
=?UTF-8?q?4.2=20=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package/component/package.json | 2 +-
.../src/component/table/TableRow.vue | 4 ++--
.../component/src/component/table/index.vue | 20 ++++++++++++------
.../src/document/zh-CN/components/table.md | 21 ++++++++++++++-----
.../src/document/zh-CN/guide/changelog.md | 11 ++++++----
5 files changed, 40 insertions(+), 18 deletions(-)
diff --git a/package/component/package.json b/package/component/package.json
index 61f44a18..03c323b7 100644
--- a/package/component/package.json
+++ b/package/component/package.json
@@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
- "version": "1.4.1",
+ "version": "1.4.2",
"author": "就眠儀式",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",
diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue
index eb6f83d4..44849a0e 100644
--- a/package/component/src/component/table/TableRow.vue
+++ b/package/component/src/component/table/TableRow.vue
@@ -183,7 +183,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
props.columns[i].fixed == "left" &&
props.tableColumnKeys.includes(props.columns[i].key)
) {
- left = left + props.columns[i]?.width.replace("px", "");
+ left = left + props.columns[i]?.width?.replace("px", "");
}
}
return { left: `${left}px` } as StyleValue;
@@ -195,7 +195,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
props.columns[i].fixed == "right" &&
props.tableColumnKeys.includes(props.columns[i].key)
) {
- right = right + props.columns[i]?.width.replace("px", "");
+ right = right + props.columns[i]?.width?.replace("px", "");
}
}
return { right: `${right}px` } as StyleValue;
diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue
index 7fba50cb..905d98c3 100644
--- a/package/component/src/component/table/index.vue
+++ b/package/component/src/component/table/index.vue
@@ -211,6 +211,10 @@ const findFinalNode = (level: number, columns: any[]) => {
if (!tableHeadColumns.value[level]) {
tableHeadColumns.value[level] = [];
}
+ // 如果列固定,并且 width 不存在, 设置默认值
+ if(column.fixed && !column.width) {
+ column.type ? column.width = "50px" : column.width = "100px";
+ }
tableHeadColumns.value[level].push(column);
findFinalNode(level + 1, column.children);
} else {
@@ -219,6 +223,10 @@ const findFinalNode = (level: number, columns: any[]) => {
if (!tableHeadColumns.value[level]) {
tableHeadColumns.value[level] = [];
}
+ // 如果列固定,并且 width 不存在, 设置默认值
+ if(column.fixed && !column.width) {
+ column.type ? column.width = "50px" : column.width = "100px";
+ }
tableHeadColumns.value[level].push(column);
}
});
@@ -323,6 +331,7 @@ const rowContextmenu = (data: any, evt: MouseEvent) => {
emit("row-contextmenu", data, evt);
};
+// 页面打印
const print = () => {
let subOutputRankPrint = document.getElementById(tableId) as HTMLElement;
let newContent = subOutputRankPrint.innerHTML;
@@ -333,9 +342,7 @@ const print = () => {
document.body.innerHTML = oldContent;
};
-/**
- * excel 导出
- */
+// 报表导出
const exportData = () => {
var tableStr = ``;
for (let tableHeadColumn of tableHeadColumns.value) {
@@ -383,11 +390,12 @@ const exportData = () => {
return;
};
-//输出base64编码
+// BASE64编码
function base64(s: string) {
return window.btoa(unescape(encodeURIComponent(s)));
}
+// 列排序
const sortTable = (e: any, key: string, sort: string) => {
let currentSort = e.target.parentNode.getAttribute("lay-sort");
if (sort === "desc") {
@@ -524,7 +532,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
props.columns[i].fixed == "left" &&
tableColumnKeys.value.includes(props.columns[i].key)
) {
- left = left + props.columns[i]?.width.replace("px", "");
+ left = left + props.columns[i]?.width?.replace("px", "");
}
}
return { left: `${left}px` } as StyleValue;
@@ -536,7 +544,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
props.columns[i].fixed == "right" &&
tableColumnKeys.value.includes(props.columns[i].key)
) {
- right = right + props.columns[i]?.width.replace("px", "");
+ right = right + props.columns[i]?.width?.replace("px", "");
}
}
return { right: `${right}px` } as StyleValue;
diff --git a/package/document-component/src/document/zh-CN/components/table.md b/package/document-component/src/document/zh-CN/components/table.md
index a5717a57..6e0a57e9 100644
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@@ -697,7 +697,8 @@ export default {
::: demo 通过 `columns` 配置 `type:'checkbox'` 开启单选列。
- 修改选中值 {{ selectedKeys5 }}
+ 修改选中
+ 修改数据
@@ -720,14 +721,23 @@ export default {
selectedKeys5.value = ["2"]
}
+ const changeDataSource23 = () => {
+ dataSource23.value = [
+ {id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue(谐音:类 UI) '},
+ {id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue(谐音:类 UI) '}
+ ]
+ }
+
const columns23 = [
{
+ fixed: "left",
type: "checkbox",
},
{
title:"账户",
width:"200px",
- key:"username"
+ key:"username",
+ fixed: "left"
},{
title:"密码",
width: "300px",
@@ -747,20 +757,21 @@ export default {
}
]
- const dataSource23 = [
+ const dataSource23 = ref([
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue(谐音:类 UI) '},
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue(谐音:类 UI) '},
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue(谐音:类 UI) '},
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue(谐音:类 UI) '},
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue(谐音:类 UI) '}
- ]
+ ])
return {
columns23,
dataSource23,
selectedKeys5,
changeSelectedKeys,
- getCheckboxProps
+ getCheckboxProps,
+ changeDataSource23
}
}
}
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 39cac29d..94e881af 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -12,16 +12,19 @@
-
+
-
-
1.4.1 2022-08-14
+ 1.4.2 2022-08-15
- - [修复] 表格开启复选框之后,不使用getCheckboxProps属性,点击时全选会报错。
+ - [修复] table 组件 fixed 属性开启时, 不设置 width 产生的错误。
+ - [修复] table 组件 dataSource 属性改变时, 清空 selectedKeys 内容。
+ - [修复] table 组件 dataSource 属性改变时, 清空 selectedKey 内容。
+ - [优化] table 组件 fixed 属性开启时, 根据 column 的 type 属性, 设置默认宽度。