淘宝网站策划怎么做,网站企业备案,南京建站在线咨询,有没有外包活的网站文章目录 实际效果1.1 效果展示1.2 核心功能 Show CodeQ A彩蛋 实际效果
1.1 效果展示 1.2 核心功能
区别网上其他思路#xff0c;我这里不需要使用原生点击事件#xff0c;将全选反选逻辑收敛在一个change事件上 此前已经看过一些全选逻辑同学尝试过后#xff0c;会… 文章目录 实际效果1.1 效果展示1.2 核心功能 Show CodeQ A彩蛋 实际效果
1.1 效果展示 1.2 核心功能
区别网上其他思路我这里不需要使用原生点击事件将全选反选逻辑收敛在一个change事件上 此前已经看过一些全选逻辑同学尝试过后会发现大部分是将全选的option单独定制然后添加事件确实可以实现目的但是存在两个问题 A1: 全选逻辑和反选逻辑分开维护方法太多维护成本高不易debug A2自定义了全选事件需要使用原生click.native事件有些平台需要2次点击才能进行标签移除交互体验就牺牲了 2. 全选选中其他都选中全选不选中其他都不选 3. 除了全选都选中则全选选中 4. 对于已经全选的标签移除一个全选自动移除 5. 提供调试思路、丰富的注释【热衷分享~~】 Show Code
el-form-item label上游服务节点 propgray_server_hostsel-select v-modelcurrentSelectedInstanceList changeselfAdaptInstanceSelectAllEventplaceholder请选择 multiple :disabledisEdit!-- el-option click.nativehandleSelectAll(chooseAllValue) :labelchooseAllValue :keychooseAllValue :valuechooseAllValue/el-option --el-option v-foritem in instanceObjectArray :keyitem.value :labelitem.label :valueitem.value //el-select
/el-form-item
export default {name: FlowSwitchManage,data() {// 动态数据一般是对象数组instanceObjectArray: [],// 当前选中的数据一般情况是普通数组currentSelectedInstanceList: [],// 非响应的数据用于保留上一次选中数据情况preSelectOptions:[],// 给全选打标记1 代表全选choose_all: 0,chooseAllValue: 全选,},methods:{selfAdaptInstanceSelectAllEvent(current) {console.log(自动响应, current, this.choose_all, this.currentSelectedInstanceList, this.instanceObjectArray)// 1.如果之前没有全选// 1.1 现在有全选全部选上// 1.2 现在没有全选但是数量和列表一致全选选上// 2.如果之前有全选 // 2.1 现在还有全选则移除的是普通选项则一并移除全选// 2.2 移除的是全选则清空if (!this.preSelectOptions.includes(this.chooseAllValue)) {if ((!current.includes(this.chooseAllValue) current.length this.instanceObjectArray.length - 1) || current.includes(this.chooseAllValue)) {this.choose_all 1this.currentSelectedInstanceList [...this.instanceObjectArray.map(option option.value)]} } else if (current.includes(this.chooseAllValue) ) {this.choose_all 0this.currentSelectedInstanceList this.currentSelectedInstanceList.filter(val val ! this.chooseAllValue)} else if (!current.includes(this.chooseAllValue)) {this.choose_all 0this.currentSelectedInstanceList []}this.preSelectOptions this.currentSelectedInstanceList},},watch: {// currentSelectedInstanceList (newVal, oldVal) {// console.log(监听instance变化, oldVal, ---, newVal)// this.selfAdaptInstanceSelectAllEvent()// } 两个方式都对// currentSelectedInstanceList: {// handler(newVal, oldVal) {// console.log(监听instance变化, oldVal, ---, newVal)// this.selfAdaptInstanceSelectAllEvent()// },// deep: true// }}
}Q A 作为一名后端童鞋 根据自己的踩坑经验总结得出该设计也借鉴不少设计基本的注释都有通过详细的字段名应该比较清晰这里在回答几个问题 1、preSelectOptions 的作用在于vue是响应式的只要你对组件变更会立刻更新mode绑定的数据这是为什么和网上其他思路不一样只使用一个方法解决的核心所在如果不保存上一次的快照数据那么是无法做到用1个方法处理 2. current 和 model绑定的模型currentSelectedInstanceList数据其实一样的这里是el组件提供方便操作而已 3. choose_all 存在的价值在于你的业务是否需要精细化控制一般场景可以忽略 彩蛋
如果使用蚂蚁的antd-design-vue框架a-select如何使用
data和method 不用改变直接迁移html使用如下即可
a-select stylewidth:200px :optionsinstanceObjectArray v-modelcurrentSelectedInstanceList changeselfAdaptInstanceSelectAllEvent placeholder请选择 modemultiple/
