SOURCE

Vue.component('edu-choise-multi-check-box', {    
    props: {
        list: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data() {
        return {
            addVisible: false,
            checkStudentList: [], // 选择的数据
            data: [
            ]
        }
    },
    watch: {
        list: function (newValue, oldValue) {
            if (newValue) {
                console.log('newValue', newValue)
                this.checkStudentList = []
                Array.isArray(newValue) && newValue.map(item => {
                    this.checkStudentList.push(item.id)
                })
                console.log(' this.checkStudentList',  this.checkStudentList)
            }
            // 依据newValue变化后 将id赋予即可
        }
    },
    computed: {
        studentList() {
            return this.list || []
        }
    },
    created() {
        // 请求数据 api 接口获取到数据后将这些数据赋值为list即可
        const result = [
            { id: 1, idCard: '342111198806146475', studentName: '张三2', disabled: false },
            { id: 2, idCard: '342111198806146474', studentName: '张三12', disabled: false },
            { id: 3, idCard: '342111198806146476', studentName: '张三22', disabled: false },
            { id: 4, idCard: '342111198806146477', studentName: '张三21', disabled: false },
            { id: 5, idCard: '342111198806146478', studentName: '张三221', disabled: false },
            { id: 6, idCard: '342111198806146479', studentName: '张三222', disabled: false }
        ]
        // 这个时候需要将this.data的值循环增加属性
        const tempResult = []
        result.map(item => {
            tempResult.push({
                ...item,
                key: item.id,
                label: item.studentName
            })
        })
        this.data = tempResult
    },
    methods: {

        // 点击确定
        ensure() {
            // 当前的弹出框子要消失 然后再需要将这个数据干掉
            const result = []
            this.data.map(item => {
                // 将这个数据循环 匹配checkId
                this.checkStudentList.map(checkItem => {
                    if (item.id === checkItem) {
                        result.push(item)
                    }
                })
            })
            console.log('result', JSON.stringify(result))
            // 需要将这个数据提交到父组件 显示
            this.$emit('change', result)
            // 框子要消失
            this.addVisible = false
        },
        // 删除学生
        deleteStudent(item) {
            // 将这个数据的删除抛到外面去给用户添加 这样就ok了
            this.$emit('delete', item)
        },
        // 显示添加操作
        showAdd() {
            this.addVisible = true
        }
    },
    template: `<div class="edu">
    <div class="edu-content">
      <el-tooltip :key="index" v-for="(item, index) in studentList" effect="dark" :content="item.idCard" placement="top">
        <div class="edu-content-item">{{ item.studentName }}
          <i class="el-icon-close" @click="deleteStudent(item)" />
        </div>
      </el-tooltip>
    </div>
    <el-button type="primary" class="edu-btn" @click="showAdd">
      添加
    </el-button>
    <el-dialog title="添加" :visible.sync="addVisible">
      <!-- list 列表数据-->
      <el-transfer
        v-model="checkStudentList"
        style="text-align: left; display: inline-block"
        filterable
        :titles="['未选择', '已选择']"
        :button-texts="['到左边', '到右边']"
        :data="data"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ensure">确定</el-button>
        <el-button @click="addVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>`
});
var app7 = new Vue({
    el: '#app-7',
    data: {
        eduList: []
    },
    created() {
        setTimeout(() => {
            this.eduList = [{ id: 1, idCard: '342111198806146475', studentName: '张三2' },
            { id: 2, idCard: '342111198806146474', studentName: '张三2' }]
        }, 1000)
    },
    methods: {
        checkBoxChange(result) {
            this.eduList = result
        },
        checkBoxDelete(student) {
            // 先要找到item的值 然后eduList删除
            let index = null
            this.eduList.map((item, i) => {
                if (item.id === student.id) {
                    index = i
                }
            })
            index !== null && this.eduList.splice(index, 1)
        },
    }
})

<div id="app-7">
  <edu-choise-multi-check-box @change="checkBoxChange" @delete="checkBoxDelete" :list="eduList"/>
</div>

.edu {
  display: flex;
  &-btn {
    margin-left: 10px;
    height: 34px;
  }
  &-content {
    width: 100%;
    min-height: 300px;
    min-width: 400px;
    display: flex;
    flex-wrap: wrap;
    max-height: 300px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    &-item {
      padding: 10px 10px;
      border-radius: 15px;
      border: 1px solid #eeeeee;
      margin: 5px 5px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      background-color: white;
      color: black;
      &:hover {
        cursor: pointer;
      }
    }
  }
}