青岛李沧建设局网站,免费男欢女爱的高清视频,ace网站建设,wordpress 图片命名吗选框和文字分开点击#xff0c;找了很多#xff0c;没有我想要的效果#xff0c;但也借鉴了一下#xff0c;实现了#xff0c;记录一下
样式看起来倒是没多大区别#xff0c;需求#xff1a;
勾选了选框才可以点击文字 #xff0c;一次只能点击一条数据#xff0c;点…选框和文字分开点击找了很多没有我想要的效果但也借鉴了一下实现了记录一下
样式看起来倒是没多大区别需求
勾选了选框才可以点击文字 一次只能点击一条数据点击文字此条数据可以向上或向下移动且此条数据的背景需高亮就像这样 排序只在勾选的数据中有效取消勾选背景取消高亮 解决点击文字不影响选中状态
我在网上搜到的是首先要写一个span标签将数据包裹起来添加点击事件一定要加上 .prevent.stop
el-checkbox-group v-modelselectedItemsdiv v-for(item, index) in vmList :keyitem.name classcheckbox-item:class{ highlight: isHighlighted(item)}el-checkbox :labelitem.name changehandleCheckboxClickspan click.prevent.stopisSelected(item) ? handleNameClick(item) : null :class{ disabled: isSelected(item) } classcustom-span{{item.name }}/span/el-checkbox/div
/el-checkbox-groupdiv classarrow-columnel-button typeprimary iconel-icon-arrow-up clickmoveUp :disabledisMoveUpDisabled/el-buttonel-button typeprimary iconel-icon-arrow-down clickmoveDown :disabledisMoveDownDisabled/el-button
/div
这样才可以实现点击文字不影响选中状态。就可以实现点击文字切换背景了但其实我要的是点击背景也可以选择整条数据并且背景高亮。
el-checkbox内部原本就有一个span标签类名为 .el-checkbox__label这个标签包裹在我加的span标签外面不管怎么调整文字周围都有一圈背景被点击后还是会改变选中状态。
后面我给.el-checkbox__label设置了一下让文字大小和行高一致再设置padding为0这样点击文字及其背景就不会影响选中状态了。但是每条数据之间没有间距看起来很拥挤就像这样 所以只能在我自己写的span标签想办法了这样设置了一下 就正常了
.custom-span {display: block;min-height: 16px;min-width: 160px;padding: 10px 0 10px 10px;
}
以下是全部代码
computed计算向上或向下按钮是否可用
computed: {// 根据选中的项计算向上移动按钮是否可用isMoveUpDisabled() {const firstSelectedItemIndex this.vmList.findIndex( item {if(this.highlightedItem this.highlightedItem.nameitem.name){return item}})// 如果没有选中项或选中项在第一项则禁用return firstSelectedItemIndex -1 || firstSelectedItemIndex 0; },// 根据选中的项计算向下移动按钮是否可用isMoveDownDisabled() {const lastHighlightedIndex this.vmList.findIndex( item { if(this.highlightedItem this.highlightedItem.nameitem.name){return item}}, this.vmList.length - 1);// 如果没有高亮项或高亮项在最后一项则禁用return lastHighlightedIndex -1 || lastHighlightedIndex this.vmList.length - 1; }
},
向上向下移动并给勾选后的数据添加order
// 向上移动选中的项
moveUp() {this.deviceList []const selectedIndices this.vmList.findIndex(vm vm.name this.selectedVms.name)if (selectedIndices 0) {const vmToMove this.vmList[selectedIndices]this.vmList.splice(selectedIndices, 1)this.vmList.splice(selectedIndices - 1, 0, vmToMove)}this.handleOrder()
},// 向下移动选中的项
moveDown() {this.deviceList []const selectedIndices this.vmList.findIndex(vm vm.name this.selectedVms.name)if (selectedIndices this.vmList.length - 1) {const vmToMove this.vmList[selectedIndices]this.vmList.splice(selectedIndices, 1)this.vmList.splice(selectedIndices 1, 0, vmToMove)}this.handleOrder()
},// 添加order
handleOrder(){const deviceListCopy JSON.parse(JSON.stringify(this.vmList));this.deviceList[...deviceListCopy]let orderCount 1;for(let i0;ithis.deviceList.length;i){const item this.deviceList[i];// 检查当前项是否在 selectedItems 中if (this.selectedItems.includes(item.name)){// 如果存在则添加 order 属性item.order String(orderCount);orderCount;}else{delete item.order;}}
}
点击勾选和文字
handleCheckboxClick(item) {// 取消勾选if (!item) {// 取消高亮this.highlightedItem null}this.handleOrder()
},highlightItem(item) {// 点击整个项时只改变背景颜色this.highlightedItem (this.highlightedItem item) ? null : item;
}, isHighlighted(item) {return this.highlightedItem item;
}, //判断是否勾选也就是文字是否可以点击
isSelected(item) {return this.selectedItems.includes(item.name);
}, // 点击文字
handleNameClick(item){this.selectedVms itemthis.highlightItem(item); // 触发高亮效果
}
样式如下:
.vm-container {float: left;border: 2px solid #dcdfe6;min-width: 200px;max-width: 300px;min-height: 250px;max-height: 300px;overflow-x: auto;overflow-y: auto;
}.el-checkbox-group{align-items: left;.el-checkbox{margin-right: 0px;}
}line-height: 0px;.vm-container:after {content: ;display: table;clear: both;
}::v-deep .el-checkbox .el-checkbox__inner{width: 15px;height: 15px;
}.vm-container::v-deep .el-checkbox {color: #9c9ea0;
}::v-deep .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {top: 2px;left: 5px;
}.arrow-column {margin-left: 10px;float: left;display: flex;flex-direction: column;align-items: left;justify-content: center;
}.el-button.el-button {margin-left: 0px;margin-top: 5px;
}.vm-container::v-deep .el-checkbox__label {font-size: 16px;line-height: 16px;padding-left: 0px;
}.vm-container::v-deep .el-checkbox__input.is-checked.el-checkbox__label {color: #333333;
}.transfer-footer {margin-left: 20px;padding: 6px 5px;
}.vm-container::v-deep .checkbox-item {display: flex;align-items: center;cursor: pointer;padding: 0 0 0 10px;position: relative;
}.vm-container::v-deep .checkbox-item.highlight {background-color: #a9d9e9 !important; /* 改变背景色 */
}.vm-container::v-deep .checkbox-item.highlight span {color: white !important; /* 确保文本颜色为白色 */
}.custom-span {display: block;min-height: 16px;min-width: 160px;padding: 10px 0 10px 10px;
}
