怎么把用Ext生成多选下拉框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么把用Ext生成多选下拉框相关的知识,希望对你有一定的参考价值。
参考技术A 使用:lovcombo 多选下拉框 ,EXTJS的扩展控件。可百度搜索下载, LovCombo.js 和样式表LovCombo.css (css可能不需要 )
使用方法:使用 xtype:'lovcombo' 其他属性和combo一样的。
jsp引用
<link rel="stylesheet" type="text/css" href="../resources/css/Ext.ux.form.LovCombo.css" />
<script type="text/javascript" src='../jslib/Ext.ux.form.LovCombo.js'></script>
找不到百度HI联系,发给你。本回答被提问者采纳 参考技术B 用一个 combox , mutiSelect : true追问
能不能说清楚一点啊...可以加分...比较急!!
参考技术C 多选为什么不用checkbox追问我是复选下拉框啊!就是combox里的选项前面要带checkBox这种,可以选多个选项的!
追答没见过这种类型的combox,或者你就用多个combox,或者就用checkBox,或者你自己从写一个combox组件
Element-ui中 选择器(select)多选下拉框实现全选功能
需求:
选择器组件(Select)支持多选,但是不支持全选。如果需要实现这个功能,该怎么修改呢?
方案一:下拉项增加一个【全选】,实现以下几种功能
- 下拉选项全都勾选时,【全选】自动勾选;
- 下拉选项部分勾选时,点击【全选】后,所有下拉项全部勾选;
- 下拉选项全都勾选时,点击【全选】后,所有下拉选项不勾选;
- 下拉选项和【全选】都选上的时候,不勾选任意下拉选项,【全选】按钮就不勾选了;
效果:
方案二:直接添加一个【全选】复选框,实现的功能与方案一相同
效果:
完整代码
父组件
<template>
<div>
<MultipleSelect
:selectOptions="selectOptions"
:mulSelectLoading="mulSelectLoading"
:mulSelecteds="mulSelecteds"
@update:updateMultipleSelect="val => mulSelecteds = val">
</MultipleSelect>
<MultipleSelect2
:selectOptions="selectOptions2"
:mulSelectLoading="mulSelectLoading2"
:mulSelecteds="mulSelecteds2"
@update:updateMultipleSelect="val => mulSelecteds2 = val">
</MultipleSelect2>
</div>
</template>
<script>
import MultipleSelect from './child.vue';
import MultipleSelect2 from './child2.vue'
export default {
data() {
return {
selectOptions:[],
mulSelectLoading:false,
mulSelecteds:[],
selectOptions2:[],
mulSelectLoading2:false,
mulSelecteds2:[],
}
},
components:{
MultipleSelect,
MultipleSelect2,
},
methods: {
mockData(){
this.mulSelectLoading = true;
this.mulSelectLoading2 = true;
setTimeout(()=>{
const options = [
{ label: '上海', value: 'sh' },
{ label: '南京', value: 'nj' },
{ label: '重庆', value: 'cq' },
{ label: '武汉', value: 'wh' },
]
this.selectOptions = options;
this.mulSelectLoading = false;
this.mulSelecteds = ['cq','nj'];
this.selectOptions2 = options;
this.mulSelectLoading2 = false;
this.mulSelecteds2 = ['cq','nj'];
},1500)
},
},
mounted(){
this.mockData();
}
}
</script>
方案一:
<template>
<el-select
size="mini"
multiple
filterable
:disabled="disabled"
v-model='selectedArr'
:loading="mulSelectLoading"
:collapse-tags="collapseTags"
placeholder='请选择'
@change='changeSelect'
@remove-tag='removeTag'>
<el-option label='全选' value='全选' @click.native='selectAll' v-if="selectOptions.length"></el-option>
<el-option v-for='item in selectOptions' :key='item.value' :label='item.label' :value='item.value'></el-option>
</el-select>
</template>
<script>
export default {
name: 'MultipleSelect',
data() {
return {
selectedArr: [],
}
},
props:{
// 选项
selectOptions:{
type:Array,
default(){
return []
}
},
// 是否禁用
disabled:{
type:Boolean,
default:false
},
// 已选中选项
mulSelecteds:{
type:Array,
default(){
return []
}
},
mulSelectLoading:{
type:Boolean,
default:false
},
collapseTags:{
type:Boolean,
default:true
}
},
methods: {
selectAll() {
if (this.selectedArr.length < this.selectOptions.length) {
this.selectedArr = []
this.selectOptions.map((item) => {
this.selectedArr.push(item.value)
})
this.selectedArr.unshift('全选');
} else { // 取消全选
this.selectedArr = [];
}
this.$emit('update:updateMultipleSelect',this.selectedArr);
},
changeSelect(val) {
if (!val.includes('全选') && val.length === this.selectOptions.length) {
this.selectedArr.unshift('全选')
} else if (val.includes('全选') && (val.length - 1) < this.selectOptions.length) {
this.selectedArr = this.selectedArr.filter((item) => { return item !== '全选'})
}
this.$emit('update:updateMultipleSelect',this.selectedArr);
},
removeTag(val) {
if (val === '全选') {
this.selectedArr = [];
this.$emit('update:updateMultipleSelect',this.selectedArr);
}
}
},
watch:{
mulSelecteds:{
handler(newVal,oldVal){
this.selectedArr = newVal;
if (!this.selectedArr.includes('全选') &&
this.selectedArr.length &&
this.selectedArr.length === this.selectOptions.length)
{
this.selectedArr.unshift('全选')
}
},
immediate: true
}
}
}
</script>
方案二:
<template>
<el-select
size="mini"
multiple
filterable
:disabled="disabled"
:loading="mulSelectLoading"
:collapse-tags="collapseTags"
v-model='selectedArr'
placeholder='请选择'
@change='changeSelect' >
<el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
<el-option v-for='item in selectOptions' :key='item.value' :label='item.label' :value='item.value'></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
checked: false,
selectedArr: [],
}
},
props:{
// 选项
selectOptions:{
type:Array,
default(){
return []
}
},
// 是否禁用
disabled:{
type:Boolean,
default:false
},
// 已选中选项
mulSelecteds:{
type:Array,
default(){
return []
}
},
mulSelectLoading:{
type:Boolean,
default:false
},
collapseTags:{
type:Boolean,
default:true
}
},
methods: {
selectAll() {
this.selectedArr = [];
if (this.checked) {
this.selectOptions.forEach((item) => { this.selectedArr.push(item.value )});
} else {
this.selectedArr = [];
}
this.$emit('update:updateMultipleSelect',this.selectedArr);
},
changeSelect(val) {
if (val.length === this.selectOptions.length) {
this.checked = true;
} else {
this.checked = false;
}
this.$emit('update:updateMultipleSelect',this.selectedArr);
}
},
watch:{
mulSelecteds:{
handler(newVal,oldVal){
this.selectedArr = newVal;
if (this.selectedArr.length &&
this.selectedArr.length === this.selectOptions.length)
{
this.checked = true;
}
},
immediate: true
}
}
}
</script>
<style lang="stylus" scoped>
.el-checkbox {
text-align: right;
width: 90%;
}
</style>
以上是关于怎么把用Ext生成多选下拉框的主要内容,如果未能解决你的问题,请参考以下文章