<!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>
element下拉 增加全选 checked版本 粘贴即用!
于 2024-09-06 10:11:52 首次发布