- 33
- 0
在官网找了找,没有对应的示例和api
<template>
<el-select class="g-public-multi-select" v-model="selectWeekDayListProp" :disabled="disabled" @change="selectChange" multiple>
<el-option
v-for="item in weekDayAry"
:key="item.value"
:label="item | getName"
:value="item.value">
</el-option>
</el-select>
</template>
<style>
.el-select__tags {
max-width: 375px !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<script>
import _const from '@/utils/constants'
export default {
name: 'weekDayMultipleSelect',
props: ['selectWeekDayList', 'disabled'],
data() {
return {
selectWeekDayListProp: this.selectWeekDayList,
isContainAll: true,
weekDayAry: [
{ 'value': 0, 'nameCn': '全部', 'nameEn': 'All' },
{ 'value': 1, 'nameCn': '周一', 'nameEn': 'Monday' },
{ 'value': 2, 'nameCn': '周二', 'nameEn': 'Tuesday' },
{ 'value': 3, 'nameCn': '周三', 'nameEn': 'Wednesday' },
{ 'value': 4, 'nameCn': '周四', 'nameEn': 'Thursday' },
{ 'value': 5, 'nameCn': '周五', 'nameEn': 'Friday' },
{ 'value': 6, 'nameCn': '周六', 'nameEn': 'Saturday' },
{ 'value': 7, 'nameCn': '周日', 'nameEn': 'Sunday' }
]
}
},
filters:{
getName(item) {
if (item === null) return
if (store.getters.lang === 'zh') {
return item.nameCn
} else {
return item.nameEn
}
}
},
methods: {
// 当周日期下拉框的值改变时触发的方法,
selectChange() {
// 定义一个变量,用来存储当前下拉框是否选中了全部
if (this.isContainAll) {
// 只有下拉框的值发生了变化才会进入此方法
// 如果之前选中了全部,则变化后肯定不包含全部了
this.isContainAll = false
// 则删除第一个全部
this.selectWeekDayListProp.splice(0, 1)
} else {
// 如果之前没有选中全部
// 判断此次是否选中了全部
this.isContainAll = this.selectWeekDayListProp.some(value => value === 0)
// 如果此次选中了全部
if (this.isContainAll) {
// 则去除其他,只保留全部,默认value=0 是全部
this.selectWeekDayListProp = [0]
} else {
// 如果当前不包含全部,则判断是否其他的七个日期全选了
if (this.selectWeekDayListProp.length === 7) {
// 去过其他七个日期全选了,则也将当前置为全部
this.selectWeekDayListProp = [0]
this.isContainAll = true
}
}
}
// 当没有选中任何周日期时,将当前置为全部
if (this.selectWeekDayListProp.length === 0) {
// 去过其他七个日期全选了,则也将当前置为全部
this.selectWeekDayListProp = [0]
this.isContainAll = true
}
this.$emit('update:selectWeekDayList', this.selectWeekDayListProp)
this.$emit('change')
}
}
}
</script>
自己写的
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
真矢马也 普通会员 1楼
在Element UI的el-select组件中,我们可以设置
multi属性为true来实现多选功能。当设置为true时,el-select组件会包含所有选项,并且可以通过索引来获取选中的选项。例如:
```html <el-select v-model="value" multiple placeholder="选择多个"
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"
```
在上面的代码中,
options是一个包含多个选项的数组。每个选项的value属性被设置为数组中的某个值,而label属性被设置为数组中的某个字符串。如果你想添加一个选择框来获取选中的选项,你可以添加一个
select元素:```html <el-select v-model="value" multiple placeholder="选择多个"
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"
```
在这个例子中,
select元素会被添加到el-select组件中,用于获取选中的选项。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

