使用复选框，实现全选，单独选中等需求功能

需求

• 当我点击单个复选框，将内容添加到右侧
• 当我复选框全部点击后，将内容添加到右侧，全选按钮自动勾选
• 当我点击全选按钮，左侧内容全部勾选，右侧内容已添加
• 当我取消全选按钮，右侧内容都删除，左侧的复选框全部取消勾选
• 当我点击右侧删除按钮，删除右侧内容，左侧复选框取消勾选

实现

html,拿到数据后，先将左侧数据渲染到页面上

/* 左侧部分 */
<div class="left">
    <ul class="memberList">
       <li v-for="(item,index) in memberList" :key="index">
        <el-avatar 
        :src="item.admin_info?item.admin_info.avatar:''" />
        <span>{{ item.name }}</span>
        <el-checkbox 
        v-model="item.checked"
        @change="changeCheckbox(item)" />
       </li>
    </ul>
    <el-checkbox 
	    v-model="checked" 
	    @change="allSelect"
	 >全选</el-checkbox>
</div>
/* 右侧部分 */
<div class="right">
   <ul class="memberList">
      <li v-for="(it,ind) in seletList" :key="ind">
        <el-avatar :src="it.admin_info?it.admin_info.avatar:''" />
        <span>{{ it.name }}</span>
        <i class="el-icon-close close" @click="deleteFn(it,ind)" />
       </li>
    </ul>
</div>

js部分

export default {
	data(){
	return{
		memberList: [],
      	seletList: [],
      	checked: false,
		}
	},
	methods:{
	// 点击单个复选框
    changeCheckbox(item) {
    //如果点击了单选按钮，则添加到右侧数组里，如果再次取消，则判断点的按钮在
    //数组中是否存在，如果存在，找出下标，删除
      if (item.checked) {
        this.seletList.push(item)
      } else {
        const res = this.seletList.findIndex(it => {
          return item.name === it.name
        })
        this.seletList.splice(res, 1)
      }
      const res = this.memberList.findIndex(it => {
        return it.checked === false
      })
      if (res === -1) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
     //  点击全选
    allSelect() {
      if (this.checked) {
        this.memberList.forEach(item => {
          item.checked = true
          this.seletList.push(item)
        })
      } else {
        this.memberList.forEach(item => {
          item.checked = false
        })
        this.seletList = []
      }
    },
     // 删除单个复选框
    deleteFn(it, ind) {
      this.seletList.splice(ind, 1)
      this.checked = false
      this.memberList.forEach(ite => {
        if (ite.name === it.name) {
          ite.checked = false
        }
      })
    },
	}
}