vue3+ts+element-plus穿梭框

<template>
  <el-dialog
    v-model="dialogVisible"
    title="选址因子配置"
    width="60%"
    :close-on-click-modal="false"
    @close="$emit('close')"
  >
    {
    
    {
    
     rightValue }}
    <el-transfer
      v-model="rightValue"
      :props="{ key: 'id', label: 'label' }"
      :data="leftValue"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入关键词搜索"
      @change="getObject"
      :button-texts="['移除因子', '添加因子']"
      :titles="['因子列表', '已选因子']"
    >
    </el-transfer>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">保存修改</el-button>
        <el-button @click="cancelEdit">取消修改</el-button>
        <el-button @click="resetReason">重置因子</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import Pagination from "../../../components/Pagination/pagination.vue";
import {
    
     defineComponent, ref, reactive, toRefs, watch, onMounted } from "vue";
interface dataobj {
    
    
  //定义为接口类型，更加详细的定义对象里的每个属性值类型
  leftValue: any[];
  rightValue: number[];
  editLayoutData: any[];
  indexOne: number;
  dialogVisible: boolean;
  confirm: () => any; //确认
  cancelEdit: () => any; //取消修改
  resetReason: () => any; //重置因子
  getObject: (value: any, direction: any, movedKeys: any) => void; //定义为函数类型，入参为any类型：无返参的普通函数
  filterMethod: (query: any, item: any) => boolean;
  //   handle: (item: string) => void;
  //   [propName: string]: any; //该对象还可加入任意属性值类型
}
export default defineComponent({
    
    
  components: {
    
     Pagination },
  props: {
    
    
    visible: {
    
    
      type: Boolean,
      dedault: false,
    },
  },
  setup(props) {
    
    
    let queryParams = reactive({
    
     pageNum: 1, pageSize: 0 });
    let data = reactive({
    
    
      dialogVisible: false,
      leftValue: [],
      rightValue: [],
      editLayoutData: [],
      indexOne: 0,
      //搜索
      confirm: () => {
    
    
        data.dialogVisible = false;
        console.log("搜索", data.rightValue);
      },
      //搜索
      filterMethod: (query: any, item: any): boolean => {
    
    
        return item.label.indexOf(query) > -1;
      },
      //取消修改
      cancelEdit: (): any => {
    
    
        data.dialogVisible = false;
        data.leftValue = [];
        data.rightValue = [];
        data.editLayoutData = [];
        data.indexOne = 0;
      },
      //重置因子
      resetReason: (): any => {
    
    
        data.leftValue = [];
        data.rightValue = [];
        data.editLayoutData = [];
        data.indexOne = 0;
      },
      // 右侧列表元素变化时触发
      // value右边框里面所有的key值  direction是方向(left和right)，movedKeys是移动的key值
      getObject: (value: any, direction: any, movedKeys: any): void => {
    
    
        // 判断移动方向
        if (direction === "right") {
    
    
          // 找出key值，然后根据key值找到下标，进行对控制删除显示的键进行修改状态
          movedKeys.map((item: number, index: number) => {
    
    
            data.editLayoutData.filter((i, k: number) => {
    
    
              if (i.id === item) {
    
    
                data.indexOne = k;
              }
            });
            // isUsed是删除，未删除的状态
            data.editLayoutData[data.indexOne].isUsed = 0;
          });
        } else {
    
    
          movedKeys.map((item: any) => {
    
    
            data.editLayoutData.filter((i, k: number) => {
    
    
              if (i.id === item) {
    
    
                data.indexOne = k;
              }
            });
            data.editLayoutData[data.indexOne].isUsed = 1;
          });
        }
      },
      //请求
      getList: () => {
    
    
        console.log("请求", 914326);
      },
    }) as dataobj;
    watch(
      () => props.visible,
      (val) => {
    
    
        if (val) {
    
    
          data.dialogVisible = val;
          data.editLayoutData = [
            {
    
     key: 1, label: "测试1", id: 1, isUsed: 1 },
            {
    
     key: 2, label: "测试2", id: 2, isUsed: 0 },
            {
    
     key: 3, label: "测试3", id: 3, isUsed: 1 },
            {
    
     key: 4, label: "测试4", id: 4, isUsed: 0 },
          ];
          const allData = data.editLayoutData;
          console.log(allData, "allData");
          const data1 = [];
          for (let i = 0; i < allData.length; i++) {
    
    
            data1.push({
    
    
              key: allData[i].id,
              label: allData[i].label,
              id: allData[i].id,
              isUsed: allData[i].isUsed,
            });
          }
          console.log(data, "data");
          data1.map((item) => {
    
    
            if (item.isUsed === 0) {
    
    
              data.rightValue.push(item.key);
            }
          });
          (data.leftValue as any) = data1;
        } else {
    
    
          data.editLayoutData = [];
          data.rightValue = [];
          data.leftValue = [];
          //请求
        }
      }
    );
    return {
    
    
      ...toRefs(data),
      ...toRefs(queryParams),
    };
  },
});
</script>
<style lang="less" scoped>
/deep/.el-pagination {
    
    
  display: flex;
  justify-content: center;
}
.el-dialog {
    
    
  width: 100%;
  .el-dialog__footer {
    
    
    .dialog-footer {
    
    
      display: flex;
      justify-content: center;
    }
  }
  .el-transfer {
    
    
    display: flex;
    justify-content: center;
  }
  /* display: inline-block; */
}
/deep/.el-transfer__buttons {
    
    
  display: flex;
  flex-direction: column;
}
/deep/.el-transfer-panel {
    
    
  width: 40%;
}
/deep/.el-transfer__button:nth-child(2) {
    
    
  margin: 0;
}
</style>