穿梭框+pinyinMatch

<template>
  <el-dialog
    title="匹配"
    :visible.sync="dialog.isShow"
    width="730px"
    top="70px"
    :close-on-click-modal="false"
    @open="openDialog"
  >
    <el-transfer
      v-model="value"
      class="department-match"
      filterable
      :filter-method="filterData"
      :titles="['未匹配数据', '已匹配数据']"
      filter-placeholder="请输入"
      :props="{
        key: 'lngdepartmentid',
        label: 'strdepartmentcodeandname'
      }"
      :data="data"
    />
    <div slot="footer">
      <el-button type="primary" @click="save">确 定</el-button>
      <el-button @click="dialog.isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { searchunmate, matching } from '@/api/financial-management/basic-settings/financial-department-match'
import pinyinMatch from 'pinyin-match'
export default {
  name: 'MatchDialog',
  data() {
    return {
      data: [],
      value: [],
      dialog: {
        isShow: false
      },
      lngdepartmentid: ''
    }
  },
  methods: {
    show(row) {
      this.dialog.isShow = true
      this.lngdepartmentid = row.lngdepartmentid
    },
    openDialog() {
      this.value = []
    },
    save() {
      if (this.value.length !== 1) {
        this.$message.error('请选择一条数据')
        return false
      }
      matching({
        'lngdepartmentid': this.lngdepartmentid,
        'lngmatedepartmentid': this.value[0]
      }
      ).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message)
          this.$emit('refresh')
          this.dialog.isShow = false
        }
      })
    },
    // 未匹配数据
    searchunmateFn() {
      searchunmate({}).then(res => {
        if (res.code === 20000) {
          this.data = res.data
        }
      })
    },
    filterData(keyword, node) {
      return pinyinMatch.match(node.strdepartmentcodeandname, keyword)
    }
  }
}
</script>
<style>
.department-match .el-transfer__button:first-child{margin-bottom:0px}
.department-match .el-transfer-panel{260px}
.department-match .el-transfer-panel__header .el-checkbox__input {display:none}
</style>
///结束
 
 
//过滤
this.tableData = this.tableData.filter(item => {
        return pinyinMatch.match(item.strdepartmentname, this.form.departmentName)
      })
原文地址:https://www.cnblogs.com/hellofangfang/p/13845192.html