perf(table): 新增 列筛选 功能

src/module/carousel/index.vue

@@ -87,7 +87,7 @@ const prev = function () {
   for (var i = 0; i < slots.length; i++) {
     if (slots[i].props.id === active.value) {
       if (i === 0) {
-        return false
+        active.value = slots[slots.length - 1].props.id
       }
       active.value = slots[i - 1].props.id
       break
@@ -99,7 +99,7 @@ const next = function () {
   for (var i = 0; i < slots.length; i++) {
     if (slots[i].props.id === active.value) {
       if (i === slots.length - 1) {
-        return false
+        active.value = slots[0].props.id
       }
       active.value = slots[i + 1].props.id
       break

src/module/layer/index.vue

@@ -59,6 +59,7 @@
         @click="maxHandle"
       ></a>
       <a
+        v-if="closeBtn"
         class="layui-layer-ico layui-layer-close layui-layer-close1"
         href="javascript:;"
         @click="closeHandle"
@@ -111,6 +112,7 @@ const props = withDefaults(
     content?: string
     shade?: boolean
     shadeClose?: boolean
+    closeBtn?: boolean
   }>(),
   {
     id: 'layer',
@@ -126,6 +128,7 @@ const props = withDefaults(
     btn: () => [],
     shade: false,
     shadeClose: true,
+    closeBtn: true,
   }
 )
 

src/module/rate/index.vue

@@ -1,29 +1,30 @@
 <template>
   <ul class="layui-rate">
     <li
-      v-for="(rate, index) in rates"
-      :key="rate"
+      v-for="index of length"
+      :key="index"
       class="layui-inline"
-      @mouseenter="mouseenter(index)"
+      @mouseenter="mouseenter(index, $event)"
     >
       <i
-        v-if="rate"
+        v-if="index <= currentValue"
         class="layui-icon layui-icon-rate-solid"
         :style="{ color: theme }"
       />
       <i v-else class="layui-icon layui-icon-rate" :style="{ color: theme }" />
     </li>
+    {{
+      currentValue
+    }}
   </ul>
 </template>
 <script setup lang="ts">
-import { defineProps, Ref, ref, watch, withDefaults } from 'vue'
-
-const rates: Ref<Array<boolean>> = ref([])
+import { computed, defineProps, Ref, ref, watch, withDefaults } from 'vue'
 
 const props = withDefaults(
   defineProps<{
     length?: number
-    modelValue?: number
+    modelValue: number
     character?: string
     readonly?: boolean
     theme?: string
@@ -35,32 +36,21 @@ const props = withDefaults(
   }
 )
 
-watch(
-  props,
-  function () {
-    rates.value = []
-    for (let index = 0; index < props.length; index++) {
-      rates.value.push(false)
-    }
-    for (let index = props.modelValue - 1; index >= 0; index--) {
-      rates.value[index] = true
-    }
-  },
-  { deep: true, immediate: true }
-)
-
 const emit = defineEmits(['update:modelValue'])
 
-const mouseenter = function (index: number) {
+const currentValue = computed({
+  get: function () {
+    return props.modelValue
+  },
+  set: function (val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const mouseenter = function (index: number, event: any) {
   if (props.readonly) {
     return false
   }
-  for (let i = index; i >= 0; i--) {
-    rates.value[i] = true
-  }
-  for (let i = index + 1; i < props.length; i++) {
-    rates.value[i] = false
-  }
-  emit('update:modelValue', index + 1)
+  currentValue.value = index
 }
 </script>

src/module/table/component/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <span @click.stop="handleClick">
+  <div @click.stop="handleClick">
     <input type="checkbox" :name="name" :value="label" />
     <div
       class="layui-unselect"
@@ -15,7 +15,7 @@
       <span><slot /></span>
       <i class="layui-icon layui-icon-ok" />
     </div>
-  </span>
+  </div>
 </template>
 
 <script setup name="LayCheckbox" lang="ts">

src/module/table/index.vue

@@ -9,6 +9,23 @@
           <slot name="toolbar"></slot>
         </div>
         <div v-if="defaultToolbar" class="layui-table-tool-self">
+          <lay-dropdown>
+            <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
+              <i class="layui-icon layui-icon-cols"></i>
+            </div>
+            <template #content>
+              <div style="padding:10px">
+              <table-item-checkbox
+                skin="primary"
+                v-for="column in columns"
+                v-model="tableColumns"
+                :label="column"
+                :key="column"
+                >{{ column.title }}</table-item-checkbox
+              >
+              </div>
+            </template>
+          </lay-dropdown>
           <div
             class="layui-inline"
             title="打印"
@@ -36,14 +53,16 @@
                     />
                   </div>
                 </th>
-                <th v-for="column in columns" :key="column">
-                  <div
-                    class="layui-table-cell"
-                    :style="{ width: column.width }"
-                  >
-                    <span>{{ column.title }}</span>
-                  </div>
-                </th>
+                <template v-for="column in columns" :key="column">
+                  <th v-if="tableColumns.includes(column)">
+                    <div
+                      class="layui-table-cell"
+                      :style="{ width: column.width }"
+                    >
+                      <span>{{ column.title }}</span>
+                    </div>
+                  </th>
+                </template>
               </tr>
             </thead>
           </table>
@@ -67,28 +86,31 @@
                       </table-item-checkbox>
                     </div>
                   </td>
-                  <template v-for="column in columns" :key="column">
-                    <template v-if="column.customSlot">
-                      <td class="layui-table-cell">
-                        <div :style="{ width: column.width }">
-                          <slot :name="column.customSlot" :data="data" />
-                        </div>
-                      </td>
-                    </template>
 
-                    <template
-                      v-for="(value, key, index) in data"
-                      v-else
-                      :key="index"
-                    >
-                      <td v-if="column.key == key" class="layui-table-cell">
-                        <div :style="{ width: column.width }">
-                          <span v-if="column.slot">
-                            <slot :name="column.slot" :data="data" />
-                          </span>
-                          <span v-else> {{ value }} </span>
-                        </div>
-                      </td>
+                  <template v-for="column in columns" :key="column">
+                    <template v-if="tableColumns.includes(column)">
+                      <template v-if="column.customSlot">
+                        <td class="layui-table-cell">
+                          <div :style="{ width: column.width }">
+                            <slot :name="column.customSlot" :data="data" />
+                          </div>
+                        </td>
+                      </template>
+
+                      <template
+                        v-else
+                        v-for="(value, key) in data"
+                        :key="value"
+                      >
+                        <td v-if="column.key == key" class="layui-table-cell">
+                          <div :style="{ width: column.width }">
+                            <span v-if="column.slot">
+                              <slot :name="column.slot" :data="data" />
+                            </span>
+                            <span v-else> {{ value }} </span>
+                          </div>
+                        </td>
+                      </template>
                     </template>
                   </template>
                 </tr>
@@ -132,7 +154,7 @@ import {
   useSlots,
   watch,
   withDefaults,
-  defineEmits,
+  defineEmits
 } from 'vue'
 import { Recordable } from '/@src/module/type'
 
@@ -167,6 +189,7 @@ const slots = slot.default && slot.default()
 
 const allChecked = ref(false)
 const tableSelectedKeys = ref([...props.selectedKeys])
+const tableColumns = ref([...props.columns])
 
 const changeAll = function ({ checked, value }: any) {
   const ids = props.dataSource.map((item: any) => {
@@ -216,3 +239,12 @@ const print = function () {
   document.body.innerHTML = oldContent
 }
 </script>
+
+<style scoped>
+.laytable-cell-checkbox {
+  width: 34px;
+}
+.layui-table-col-special {
+  width: 34px;
+}
+</style>