el-select 添加多选/清空功能

最新推荐文章于 2024-08-17 08:58:12 发布

m0_65678046

最新推荐文章于 2024-08-17 08:58:12 发布

阅读量83

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_65678046/article/details/141156216

版权

前提：需下有element ui

直接上代码！

<template>
  <div>
<el-select multiple  v-model="activeForm.list1_Ids" filterable placeholder="请选择">
      <div style="text-align: right;cursor: pointer;color: #1A73E8;padding-right:5% " >
        <span @click="searchAllChange(true)" style="font-size: 12px" v-if="list1.length>0">全选</span>
        <span @click="searchAllChange(false)"  style="padding: 0 2%;font-size: 12px"  v-if="activeForm.list1_Ids.length>0">清空</span>
      </div>
      <el-option   v-for="item in list1"   :key="item.Key"  :label="item.Key"  :value="item.Value" > </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
        activeForm:{
        list1_Ids:[], //列表1选择的数据
          },
        list1:[
            {Key:'list1',Value:1},
            {Key:'list2',Value:2},
            {Key:'list3',Value:3},
      ],
  }
},
  methods:{
    searchAllChange(val){
      if(val){
        this.activeForm.list1_Ids = this.list1.map(item=>item.Value)
      }else{
        this.activeForm.list1_Ids = []
      }
    },
    
    }

}

保存看效果！