113 链接集10--ctrl+左键单击多选

1.ctrl+左键单击多选，单击单选

精简代码

  <div class="model-list"><div@mousedown.prevent="handleClick(item, $event)"class="model-list-item"v-for="item in modelList":key="item.id":class="{ 'model-active': item.active }">{{ item.name }}</div></div>//scriptpublic modelList = [{id: 0,name: '马栏山方案-HR-0001',active: false,},{id: 1,name: '马栏山方案-HR-0002',active: false,},{id: 2,name: '马栏山方案-HR-0003',active: false,},];//单选 状态切换modelSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;} else {item.active = false;}});}//多选状态为truemultiSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;}});}//判断是否多选操作handleClick(item: any, event: any) {// 检查是否按下了Ctrl键并是左键点击if (event.ctrlKey && event.button === 0) {this.multiSelect(item);} else {this.modelSelect(item);}}

<template><!-- 数据编辑--合并 --><CsDialog:width="580"@close="visibleDialog = false"@reduce="visibleDialog = false"@expend="visibleDialog = false"title="合并":visible="visibleDialog"><div class="row-item common-wrapper">提示：选择一个模型继承其属性</div><div class="model-list"><div@mousedown.prevent="handleClick(item, $event)"class="model-list-item"v-for="item in modelList":key="item.id":class="{ 'model-active': item.active }">{{ item.name }}</div></div><template slot="footer"><div class="end__operation"><CsButton @click="visibleDialog = false">确定</CsButton><CsButton @click="visibleDialog = false">取消</CsButton></div></template></CsDialog>
</template><script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';@Component({components: {},
})
export default class CombineDialog extends Vue {@Prop() visible!: any;get visibleDialog() {return this.visible;}set visibleDialog(val: any) {this.$emit('update:visible', val);}mounted() {}public modelList = [{id: 0,name: '马栏山方案-HR-0001',active: false,},{id: 1,name: '马栏山方案-HR-0002',active: false,},{id: 2,name: '马栏山方案-HR-0003',active: false,},{id: 3,name: '马栏山方案-HR-0004',active: false,},{id: 4,name: '马栏山方案-HR-0005',active: false,},{id: 5,name: '马栏山方案-HR-0006',active: false,},{id: 6,name: '马栏山方案-HR-0006',active: false,},{id: 7,name: '马栏山方案-HR-0006',active: false,},{id: 8,name: '马栏山方案-HR-0006',active: false,},];modelSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;} else {item.active = false;}});}multiSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;}});}handleClick(item: any, event: any) {// 检查是否按下了Ctrl键并是左键点击if (event.ctrlKey && event.button === 0) {this.multiSelect(item);} else {this.modelSelect(item);}}
}
</script><style lang="scss" scoped>
.excavation-analysis {position: absolute;top: 0;left: 50%;
}
.end__operation {float: right;display: flex;
}.el-radio-group {padding: 5px 8px;border-radius: 2px;border: 1px solid rgba(204, 212, 228, 1);background-color: #f9fafc;display: flex;align-items: center;
}
.row-item {display: flex;justify-content: space-between;margin-bottom: 8px;
}
.common-wrapper {display: flex;align-items: center;font-size: 14px;font-weight: 400;line-height: 22px;color: rgba(115, 123, 141, 1);padding: 5px 8px;border-radius: 2px;border: 1px solid rgba(204, 212, 228, 1);background-color: #f9fafc;font-family: PingFang SC;
}
.file-select {display: flex;justify-content: space-between;width: 100%;
}.model-list {font-family: PingFang SC;font-size: 14px;color: rgba(115, 123, 141, 1);max-height: 300px;overflow-y: auto;.model-list-item {height: 32px;line-height: 32px;padding-left: 8px;&:nth-child(2n + 1) {background-color: rgba(245, 248, 253, 1);}}.model-active {background: rgba(203, 218, 255, 1) !important;}
}
</style>