zoukankan      html  css  js  c++  java
  • el-select --->全选功能

    <template>
      <el-select v-model="value" placeholder="请选择"
        reserve-keyword
        :filter-method="filterFun">
        <el-option
         :class="'allSelected' ? allSelected && index === 0"
          v-for="(item, index) in options"
          @click.native=handleOptionClick(index)
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value: '',
            allSelected: false,
            option:[],
            optionCopy:[]
          }
        },
        methods:{
         handleOptionClick(index){
          if(index === 0){
              this.allSelected = !this.allSelected
              this.value = this.allSelected ? this.option.slice(1).map(item => item.value) : []
           }
           this.allSelected  = (this.value.length === this.option.length -1)
          }
        },
        filterFun (val) {
         this.option = this.optionCopy.filter(item=> {
          if(item.labe.indexOf(val) !== -1){
           return item
           }
         })
          this.option.unshift({value: '',label: '全选'})
        }
      }
    </script>        
    

      

  • 相关阅读:
    ruby学习笔记(5)
    rails学习笔记(2)
    一个不错的rails2.0教程
    rails学习笔记(2)
    rails学习笔记(1)
    一个不错的rails2.0教程
    ruby学习笔记(6)
    ruby学习笔记(6)
    rails学习笔记(1)
    DELPHI的编译指令
  • 原文地址:https://www.cnblogs.com/cs122/p/13231813.html
Copyright © 2011-2022 走看看