!73 修复table 问题，删除不应提交的文件夹

Merge pull request !73 from 莫名点/next

package/component/src/component/rate/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 export default {
-  name: "LayRate"
+  name: "LayRate",
 };
 </script>
 
@@ -83,14 +83,12 @@ const action = function (index: number, event: any) {
 };
 
 // 清除评分图标
-const showClearIcon = computed(
+const showClearIcon = computed(() => !props.readonly && props.hasClear);
-  () => !props.readonly && props.hasClear
-);
 const clearRate = function () {
   tempValue.value = 0;
   currentValue.value = 0;
   emit("clear", currentValue.value);
-}
+};
 </script>
 
 <template>
@@ -131,7 +129,11 @@ const clearRate = function(){
       </span>
     </template>
     <template v-if="showClearIcon">
-      <i :class="['layui-icon', 'layui-rate-clear-icon', clearIcon]" @click="clearRate" title="清除评分"></i>
+      <i
+        :class="['layui-icon', 'layui-rate-clear-icon', clearIcon]"
+        @click="clearRate"
+        title="清除评分"
+      ></i>
     </template>
   </div>
 </template>

package/component/src/component/table/index.less

@@ -9,10 +9,11 @@
   width: 100%;
   background-color: #fff;
   color: #666;
+  table-layout: fixed;
 }
 
 .layui-table tr {
-  display: flex;
+  // display: flex;
 }
 
 .layui-table th {
@@ -55,7 +56,7 @@
 .layui-table td,
 .layui-table th {
   position: relative;
-  padding: 9px 15px;
+  padding: 9px 8px;
   min-height: 20px;
   height: 40px;
   line-height: 20px;
@@ -105,6 +106,7 @@
 .layui-table-box {
   position: relative;
   overflow: hidden;
+
 }
 
 .layui-table-view .layui-table {
@@ -236,9 +238,16 @@
 
 .layui-table-cell,
 .layui-table-tool-panel li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // white-space: nowrap;
+}
+.layui-table-call-ellipsis{
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
 }
 
 .layui-table-tool-panel li {
@@ -355,6 +364,29 @@
   position: relative;
   overflow: auto;
   margin-bottom: -1px;
+  &::-webkit-scrollbar {
+    width: 13px;
+    height: 13px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    background-clip: padding-box;
+    border: 3px solid transparent;
+    border-radius: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track:hover {
+    background-color: #f8fafc;
+  }
 }
 
 .layui-table-body .layui-none {

package/component/src/component/table/index.vue

@@ -13,6 +13,7 @@ import LayDropdown from "../dropdown/index.vue";
 import LayPage from "../page/index.vue";
 import { LayIcon } from "@layui/icons-vue";
 import "./index.less";
+import LayTooltip from "../tooltip/index.vue";
 
 const tableId = uuidv4();
 
@@ -275,7 +276,8 @@ onMounted(() => {
                     class="layui-table-cell"
                     :style="{
                       textAlign: column.align,
-                      flex: column.width ? '0 0 ' + column.width : '1',
+                      width: column.width ? column.width : '0',
+                      minWidth: column.minWidth ? column.minWidth : '47px',
                     }"
                   >
                     <span>
@@ -340,10 +342,31 @@ onMounted(() => {
                           class="layui-table-cell"
                           :style="{
                             textAlign: column.align,
-                            flex: column.width ? '0 0 ' + column.width : '1',
+                            width: column.width ? column.width : '0',
+                            minWidth: column.minWidth
+                              ? column.minWidth
+                              : '47px',
+                            whiteSpace: column.ellipsisTooltip
+                              ? 'nowrap'
+                              : 'normal',
                           }"
                         >
-                          <slot :name="column.customSlot" :data="data"></slot>
+                          <lay-tooltip
+                            v-if="column.ellipsisTooltip"
+                            :content="data[column.key]"
+                          >
+                            <div class="layui-table-call-ellipsis">
+                              <slot
+                                :name="column.customSlot"
+                                :data="data"
+                              ></slot>
+                            </div>
+                          </lay-tooltip>
+                          <slot
+                            v-else
+                            :name="column.customSlot"
+                            :data="data"
+                          ></slot>
                         </td>
                       </template>
                       <!-- 匹 配 Column -->
@@ -353,10 +376,24 @@ onMounted(() => {
                             class="layui-table-cell"
                             :style="{
                               textAlign: column.align,
-                              flex: column.width ? '0 0 ' + column.width : '1',
+                              width: column.width ? column.width : '0',
+                              minWidth: column.minWidth
+                                ? column.minWidth
+                                : '47px',
+                              whiteSpace: column.ellipsisTooltip
+                                ? 'nowrap'
+                                : 'normal',
                             }"
                           >
-                            <span> {{ data[column.key] }} </span>
+                            <lay-tooltip
+                              v-if="column.ellipsisTooltip"
+                              :content="data[column.key]"
+                            >
+                              <div class="layui-table-call-ellipsis">
+                                {{ data[column.key] }}
+                              </div>
+                            </lay-tooltip>
+                            <span v-else> {{ data[column.key] }} </span>
                           </td>
                         </template>
                       </template>

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

@@ -35,12 +35,16 @@ export default {
         title:"年龄",
         width: "180px",
         key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
       }
     ]
 
     const dataSource1 = [
-      {username:"root", password:"root", age:"18"},
+      {username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
-      {username:"woow", password:"woow", age:"20"}
+      {username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
     ]
 
     return {
@@ -256,26 +260,34 @@ export default {
       },{
         title:"密码",
         customSlot:"password",
+        width:"200px",
         key:"password",
         align: "center"
       },
       {
         title:"年龄",
-        width: "180px",
+        width: "200px",
         key:"age",
         sort: true,
         align: "right"
+      },
+{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true,
       }
       ,{
         title:"操作",
+        width:"100px",
         customSlot:"operator",
         key:"operator"
       }
     ]
 
     const dataSource5 = [
-      {id:"1", username:"root", age:"18"},
+      {id:"1", username:"root",password: '**',age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
-      {id:"2", username:"woow", age:"20"}
+      {id:"2", username:"woow",password: '**', age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
     ]
 
     const rowClick5 = function(data) {
@@ -358,9 +370,11 @@ export default {
 | key        | 数据字段   | --       | --     | --                      |
 | customSlot | 自定义插槽 | --       | --     | --                      |
 | width      | 宽度       | --       | --     | --                      |
+| minWidth      | 最小宽度       | --       | --     | --                      |
 | sort       | 排序       | --       | --     | --                      |
 | titleSlot  | 标题插槽   | --       | --     | --                      |
 | align      | 对齐方式   | `string` | `left` | `left` `right` `center` |
+| ellipsisTooltip  | 当内容过长被隐藏时显示 tooltip   | `boolean` | `false` | `true` `false` |
 
 :::