Button-Group组件的基础属性
multiple: 带有 multiple 属性将允许用户选中多个值并以数组的形式返回。
mandatory: 带有 mandatory 属性 将总是有一个(被选中的)值。
组件默认绑定一个 change事件,监听组件每次变化,返回选中值的数组。单个按钮绑定value属性,则监听返回value值数组。
实现功能
1.在此基础上需要实现一个功能,点击不同的按钮或按钮组,渲染不同的数据。
2.点击第一个按钮(全部),取消后面所有按钮选中状态。
3.点击多选后面的按钮,取消第一个按钮(全部)的选中状态。
changeHandler (value) {
// 获取返回数组中特殊项。
var spItem = value.find(item => item === '全部')
// 判断数组是否存在特殊项
if (spItem) {
// 判断数组的第一个是否为特殊项,且长度大于1时
if (value[0] === spItem && value.length > 1) {
value = value.filter(item => item !== spItem)
// 重新赋值,渲染组件按钮的选中状态
this.currentYear = value
// 请求参数的值,与选中按钮返回的值一致
this.searchConditionObj.nf.selected = value
// 发起请求
this.getChartData()
}
// 判断数组的最后一个是否为特殊项,且长度大于1时
if (value[value.length - 1] === spItem && value.length > 1) {
// 当再次点击特殊项,取消其他选中项状态,只留特殊项
value = spItem
this.currentYear = value
this.searchConditionObj.nf.selected = value
this.getChartData()
}
} else {
// 组件按钮选中项的返回值没有特殊项,正常赋值
this.searchConditionObj.nf.selected = value
this.getChartData()
}
},