element下拉增加全选 checked版本粘贴即用！

zhangyubababa

已于 2024-09-06 10:15:03 修改

阅读量236

点赞数 1

文章标签： vue.js javascript 前端

于 2024-09-06 10:11:52 首次发布

本文链接：https://blog.csdn.net/zhangyubababa/article/details/141952445

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue分页组件</title>
  <style>
  </style>
</head>

<body>
  <div id="app">
    <template>
      <el-select v-model="formInline.value" multiple collapse-tags placeholder="请选择" style="width: 230px"
        @change="selectFlowChange">
        <el-checkbox v-model="checkOptions.checkAll" :style="{paddingLeft:'20px'}"
          :indeterminate="checkOptions.isIndeterminate" @change="handleCheckAllChange">
          全选
        </el-checkbox>
        <el-option v-for="(item,index) in fruitLists" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>


    </template>
  </div>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        fruitLists: [
          { value: '', label: 'ALL' },
          { value: 'apple6', label: 'app1e' },
          { value: 'orange6', label: 'orange' },
          { value: 'pear6', label: 'pear' },
          { value: 'banana6', label: 'banana' },
          { value: 'mongo6', label: 'mongo' }
        ],
        formInline: {
          value: '',
        },
        checkOptions: {
          isIndeterminate: false,
          checkAll: false,
        },
      },




      methods: {
        // 流向全选
        handleCheckAllChange (e) {
          this.formInline.value = e ? this.fruitLists.map((item) => item.value) : []
           this.checkOptions.isIndeterminate = false
        },
        // 流向选择
        selectFlowChange (e) {
          const nowLength = this.formInline.value.length
          this.checkOptions.isIndeterminate = nowLength > 0 && nowLength < this.fruitLists.length
          this.checkOptions.checkAll = nowLength == this.fruitLists.length
        },

      }
    })
  </script>



</body>

</html>