✨(component): 发布 1.4.2 版本

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",

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;

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;

package/document-component/src/document/zh-CN/components/table.md

@@ -697,7 +697,8 @@ export default {
 ::: demo 通过 `columns` 配置 `type:'checkbox'` 开启单选列。
 
 <template>
-  <lay-button @click="changeSelectedKeys">修改选中值 {{ selectedKeys5 }}</lay-button>
+  <lay-button @click="changeSelectedKeys">修改选中</lay-button>
+  <lay-button @click="changeDataSource23">修改数据</lay-button>
   <lay-table :columns="columns23" :data-source="dataSource23" v-model:selectedKeys="selectedKeys5"></lay-table>
 </template>
 
@@ -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
     }
   }
 }

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -12,16 +12,19 @@
 <lay-timeline>
   <lay-timeline-item title="1.4.x">
     <ul> 
-      <a name="1-3-14"></a> 
+      <a name="1-4-2"></a> 
       <li> 
-        <h3>1.4.1 <span class="layui-badge-rim">2022-08-14</span></h3> 
+        <h3>1.4.2 <span class="layui-badge-rim">2022-08-15</span></h3> 
         <ul>     
-          <li>[修复] 表格开启复选框之后，不使用getCheckboxProps属性，点击时全选会报错。</li>
+          <li>[修复] table 组件 fixed 属性开启时, 不设置 width 产生的错误。</li>
+          <li>[修复] table 组件 dataSource 属性改变时, 清空 selectedKeys 内容。</li>
+          <li>[修复] table 组件 dataSource 属性改变时, 清空 selectedKey 内容。</li>
+          <li>[优化] table 组件 fixed 属性开启时, 根据 column 的 type 属性, 设置默认宽度。 </li>
         </ul>
       </li>
     </ul>
     <ul> 
-      <a name="1-3-14"></a> 
+      <a name="1-4-1"></a> 
       <li> 
         <h3>1.4.1 <span class="layui-badge-rim">2022-08-14</span></h3> 
         <ul>