feat(transfer): 新增 showSearch 属性

example/docs/zh-CN/components/badge.md

@@ -50,7 +50,7 @@ export default {
 
 ::: table
 
-| 属性  | 描述   | 可选值                                               |
+| 属性  | 描述   | 可选值                                       |
 | ----- | ---- | --------------------------------------------- |
 | type  | 类型 | `dot` `rim`                                   |
 | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |

example/docs/zh-CN/components/transfer.md

@@ -51,7 +51,6 @@ export default {
     const dataSource2 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
     const title = ['我喜欢的','我不喜欢的']
 
-
     return {
       dataSource2,
       title
@@ -68,7 +67,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-transfer :dataSource="dataSource1">
+  <lay-transfer :dataSource="dataSource3">
     <template v-slot:item="{ data }">
       {{data.id}}
     </template>
@@ -81,10 +80,79 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
+    const dataSource3 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
 
     return {
-      dataSource1
+      dataSource3
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 开启搜索
+:::
+
+::: demo
+
+<template>
+  <lay-transfer :dataSource="dataSource5" showSearch="true"></lay-transfer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const dataSource5 = [
+      {id:'1', title:'无影剑'},
+      {id:'2', title:'逸龙剑'},
+      {id:'3', title:'精灵之语'},
+      {id:'4', title:'十字斩刀-斗'},
+      {id:'5', title:'落炎魔杖'},
+      {id:'6', title:'石中剑'},
+      {id:'7', title:'屠戮之刃'}
+    ]
+    
+    return {
+      dataSource5
+    }
+  }
+}
+</script>
+
+::: 
+
+::: title 海量数据
+:::
+
+::: demo
+
+<template>
+  <lay-transfer :dataSource="dataSource4"></lay-transfer>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const dataSource4 = [
+      {id:'1', title:'无影剑'},
+      {id:'2', title:'逸龙剑'},
+      {id:'3', title:'精灵之语'},
+      {id:'4', title:'十字斩刀-斗'},
+      {id:'5', title:'落炎魔杖'},
+      {id:'6', title:'石中剑'},
+      {id:'7', title:'屠戮之刃'}
+    ]
+    
+    return {
+      dataSource4
     }
   }
 }

example/docs/zh-CN/guide/changelog.md

@@ -21,6 +21,7 @@
           <li>[新增] table 表格组件 excel 导出工具栏。</li>
           <li>[新增] page 分页组件 v-model 属性, 支持默认页设置。</li>
           <li>[新增] date-picker 日期选择组件, 支持年月, 日期, 时间。</li>
+          <li>[新增] transfer 穿梭框组件 showSearch 开启搜索属性。</li>
           <li>[修复] checkbox 复选框组件, 选中颜色丢失。</li>
           <li>[修复] slider 滑块组件, 默认 step 值异常。</li>
           <li>[升级] layer-vue 1.3.10 版本。</li>

src/component/page/index.vue

@@ -56,12 +56,7 @@ const maxPage = ref(0);
 const totalPage = computed(() => {
   maxPage.value = Math.ceil(props.total / props.limit);
   let r: number[] = [],
-    start =
-      maxPage.value <= props.pages
-        ? 1
-        : currentPage.value > pages
-        ? currentPage.value - pages
-        : 1;
+    start = maxPage.value <= props.pages ? 1 : currentPage.value > pages ? currentPage.value - pages : 1;
   for (let i = start; ; i++) {
     if (r.length >= props.pages || i > maxPage.value) {
       break;
@@ -100,7 +95,6 @@ const jumpPage = function () {
 
 watch(inlimit, function () {
   currentPage.value = 1;
-  // maxPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {

src/component/table/index.vue

@@ -202,11 +202,12 @@ onMounted(() => {
                 <template v-for="column in columns" :key="column">
                   <th v-if="tableColumnKeys.includes(column.key)">
                     <!-- TODO Table header slot  -->
-                    <div
-                      class="layui-table-cell"
-                      :style="{ width: column.width }"
-                    >
+                    <div class="layui-table-cell" :style="{ width: column.width }">
                       <span>{{ column.title }}</span>
+                      <span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort="">
+                        <i class="layui-edge layui-table-sort-asc" title="升序"></i>
+                        <i class="layui-edge layui-table-sort-desc" title="降序"></i>
+                      </span>
                     </div>
                   </th>
                 </template>

src/component/transfer/index.vue

@@ -6,12 +6,14 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
+import LayScroll from "../scroll";
 import { Ref, ref, useSlots, watch } from "vue";
 import { Recordable } from "../../types";
 
 export interface LayTransferProps {
   id?: string;
   title?: string[];
+  showSearch?: boolean;
   dataSource: Recordable[];
 }
 
@@ -21,12 +23,16 @@ const props = withDefaults(defineProps<LayTransferProps>(), {
   id: "id",
   title: () => ["主列表", "副列表"],
   dataSource: () => [],
+  showSearch: false,
   selectedKeys: () => [],
 });
 
 const leftDataSource: Ref<any[]> = ref([...props.dataSource]);
 const rightDataSource: Ref<any[]> = ref([]);
 
+const _leftDataSource: Ref<any[]> = ref([...props.dataSource]);
+const _rightDataSource: Ref<any[]> = ref([]);
+
 const leftSelectedKeys: Ref<string[]> = ref([]);
 const rightSelectedKeys: Ref<string[]> = ref([]);
 
@@ -97,6 +103,14 @@ const add = function () {
   leftDataSource.value = leftDataSource.value.filter(
     (item) => leftSelectedKeys.value.indexOf(item.id) === -1
   );
+  _leftDataSource.value.forEach((item) => {
+    if (leftSelectedKeys.value.indexOf(item.id) != -1) {
+      _rightDataSource.value.push(item);
+    }
+  });
+  _leftDataSource.value = _leftDataSource.value.filter(
+    (item) => leftSelectedKeys.value.indexOf(item.id) === -1
+  );
   leftSelectedKeys.value = [];
 };
 
@@ -112,8 +126,38 @@ const remove = function () {
   rightDataSource.value = rightDataSource.value.filter(
     (item) => rightSelectedKeys.value.indexOf(item.id) === -1
   );
+  _rightDataSource.value.forEach((item) => {
+    if (rightSelectedKeys.value.indexOf(item.id) != -1) {
+      _leftDataSource.value.push(item);
+    }
+  });
+  _rightDataSource.value = _rightDataSource.value.filter(
+    (item) => rightSelectedKeys.value.indexOf(item.id) === -1
+  );
   rightSelectedKeys.value = [];
 };
+
+const searchLeft = (e: any) => {
+    if(e.target.value === "") {
+      leftDataSource.value = _leftDataSource.value;
+    }
+    leftDataSource.value = _leftDataSource.value.filter((item) => {
+      if(item.title.indexOf(e.target.value) != -1) {
+        return item;
+      };
+    })
+}
+
+const searchRight = (e: any) => {
+    if(e.target.value === "") {
+      rightDataSource.value = _rightDataSource.value;
+    }
+    rightDataSource.value = _rightDataSource.value.filter((item) => {
+      if(item.title.indexOf(e.target.value) != -1) {
+        return item;
+      };
+    })
+}
 </script>
 
 <template>
@@ -130,6 +174,10 @@ const remove = function () {
             <span>{{ title[0] }}</span>
           </lay-checkbox>
         </div>
+        <div class="layui-transfer-search" v-if="showSearch">
+          <i class="layui-icon layui-icon-search"></i
+          ><input type="input" class="layui-input" @input="searchLeft" placeholder="关键词搜索" />
+        </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in leftDataSource" :key="dataSource">
             <lay-checkbox
@@ -168,6 +216,10 @@ const remove = function () {
             <span>{{ title[1] }}</span>
           </lay-checkbox>
         </div>
+        <div class="layui-transfer-search" v-if="showSearch">
+          <i class="layui-icon layui-icon-search"></i
+          ><input type="input" class="layui-input" @input="searchRight" placeholder="关键词搜索" />
+        </div>
         <ul class="layui-transfer-data" style="height: 320px">
           <li v-for="dataSource in rightDataSource" :key="dataSource">
             <lay-checkbox