element ui 限制el-transfer穿梭框传送的数据

原创已于 2023-08-24 17:07:16 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #elementui

于 2023-08-24 14:45:15 首次发布

本文介绍如何在Element UI的el-transfer组件中限制右侧显示的最大数据条数，实现只能显示三条数据的功能，并提供了可直接使用的代码示例。

效果如下，右侧只能放三条数据，可以自己调试

代码如下，直接粘贴复制即可

<template>
  <el-transfer
      v-model="value"
      filterable
      :data="box"
      @change="transferChange"
      @left-check-change="leftCheckChange"
      :titles="['可选列表', '已选中']"
  ></el-transfer>
</template>

<script>
export default {
  data() {
    return {
      box: [],
      value: [],
    }
  },
  methods: {
    get() {
      for (let i = 0; i < 8; i++) {
        this.box.push({
          key: i,
          direction: 'left',
          label: `备选项 ${i}`,
          disabled: false,
        })
      }
    },
    transferChange(leftData, direction, rightData) {
      console.log('transferChange', leftData, direction, rightData)
      if (direction == 'right') {
        this.box.map((item) => {
          if (rightData.includes(item)) {
            item.disabled = true
            item.direction = 'right'
          }
        })
      } else {
        this.box.map((item) => {
          item.disabled = false
          item.direction = 'left'
        })
      }
    },
    leftCheckChange(checks) {
      console.log(checks)
      let count = this.value.length + checks.length
      if (count >= 3) {
        let tmpArr = checks.concat(this.value)
        this.box.map((item, index) => {
          tmpArr.includes(index)
              ? (item.disabled = false)
              : (item.disabled = true)
        })
      } else {
        this.box.map((item) => {
          item.disabled = false
        })
      }
    },
  },
  mounted() {
    this.get()
  },
}
</script>