mirror of https://github.com/jeecgboot/jeecg-boot
【issues/8078】角色选择组件点击文字部分会一直选中
parent
8abce5ad9c
commit
44146f073e
|
@ -3,7 +3,7 @@
|
|||
<div @click="showModal" :class="disabled ? 'select-input disabled-select' : 'select-input'">
|
||||
<template v-if="selectedList.length > 0">
|
||||
<template v-for="(item, index) in selectedList">
|
||||
<SelectedUserItem v-if="index < maxCount" :info="item" @unSelect="unSelect" query />
|
||||
<SelectedUserItem v-if="index < maxSelectCount" :info="item" @unSelect="unSelect" query />
|
||||
</template>
|
||||
</template>
|
||||
<span v-else style="height: 30px; line-height: 30px; display: inline-block; margin-left: 7px; color: #bfbfbf">请选择</span>
|
||||
|
@ -26,7 +26,7 @@
|
|||
import { Form } from 'ant-design-vue';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
||||
const maxCount = 2;
|
||||
const maxCount = 3;
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RoleSelectInput',
|
||||
|
@ -39,6 +39,12 @@
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// update-begin--author:liaozhiyang---date:20250414--for:【issues/8078】角色选择组件点击文字部分会一直选中
|
||||
maxSelectCount: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
// update-end--author:liaozhiyang---date:20250414--for:【issues/8078】角色选择组件点击文字部分会一直选中
|
||||
store: {
|
||||
type: String,
|
||||
default: 'id',
|
||||
|
@ -77,7 +83,7 @@
|
|||
}
|
||||
|
||||
const ellipsisInfo = computed(() => {
|
||||
let max = maxCount;
|
||||
let max = props.maxSelectCount;
|
||||
let len = selectedList.value.length;
|
||||
if (len > max) {
|
||||
return { status: true, count: len - max };
|
||||
|
@ -205,7 +211,6 @@
|
|||
return {
|
||||
selectedList,
|
||||
ellipsisInfo,
|
||||
maxCount,
|
||||
registerRoleModal,
|
||||
closeRoleModal,
|
||||
showModal,
|
||||
|
|
|
@ -156,8 +156,11 @@
|
|||
if(!list || list.length ==0 ){
|
||||
return;
|
||||
}
|
||||
let arr = list.filter(item=>item.id == id);
|
||||
arr[0].checked = false;
|
||||
// update-begin--author:liaozhiyang---date:20250414--for:【issues/8078】角色选择组件点击文字部分会一直选中
|
||||
let findItem = list.find((item) => item.id == id);
|
||||
findItem.checked = false;
|
||||
selectedKeys.value = selectedKeys.value.filter((key) => key != id);
|
||||
// update-end--author:liaozhiyang---date:20250414--for:【issues/8078】角色选择组件点击文字部分会一直选中
|
||||
}
|
||||
|
||||
async function loadDataList() {
|
||||
|
@ -190,23 +193,30 @@
|
|||
console.log('loadDataList', data);
|
||||
}
|
||||
|
||||
|
||||
function onSelect(e, item) {
|
||||
prevent(e);
|
||||
console.log('onselect');
|
||||
// 单选判断 只能选中一条数据 其余数据置false
|
||||
if(props.multi === false){
|
||||
let list = dataList.value;
|
||||
for(let item of list){
|
||||
item.checked = false;
|
||||
}
|
||||
// update-begin--author:liaozhiyang---date:20250414--for:【issues/8078】角色选择组件点击文字部分会一直选中
|
||||
// 单选模式下,先清除所有选中状态
|
||||
if (!props.multi) {
|
||||
dataList.value.forEach(dataItem => {
|
||||
if (dataItem.id != item.id) {
|
||||
dataItem.checked = false;
|
||||
}
|
||||
});
|
||||
// 清空已选择的keys
|
||||
selectedKeys.value = [];
|
||||
}
|
||||
|
||||
// 切换当前项的选中状态
|
||||
item.checked = !item.checked;
|
||||
|
||||
// 更新selectedKeys数组
|
||||
if (item.checked) {
|
||||
selectedKeys.value.push(item.id);
|
||||
} else {
|
||||
selectedKeys.value = selectedKeys.value.filter((k) => k != item.id);
|
||||
selectedKeys.value = selectedKeys.value.filter(key => key !== item.id);
|
||||
}
|
||||
// update-end--author:liaozhiyang---date:20250414--for:【issues/8078】角色选择组件点击文字部分会一直选中
|
||||
}
|
||||
|
||||
function prevent(e) {
|
||||
|
|
|
@ -420,9 +420,9 @@ export const schemas: FormSchema[] = [
|
|||
component: 'RoleSelect',
|
||||
componentProps: {
|
||||
//最大选择数量
|
||||
maxSelectCount: 3,
|
||||
maxSelectCount: 4,
|
||||
//是否单选
|
||||
isRadioSelection: false
|
||||
multi: true
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue