feat: xselect edit参数更改

This commit is contained in:
caoqianming 2024-10-26 13:13:03 +08:00
parent 177446d8c2
commit 27fd49a690
1 changed files with 93 additions and 85 deletions

View File

@ -1,7 +1,7 @@
<template>
<div>
<el-input ref="inputRef" v-model="selectLabel" :readonly="true">
<template #prefix>
<template #prefix v-if="edit">
<el-button
text
size="small"
@ -10,7 +10,7 @@
@click="showPopover = true"
></el-button>
</template>
<template #suffix>
<template #suffix v-if="edit">
<el-button
text
size="small"
@ -21,7 +21,6 @@
></el-button>
</template>
</el-input>
<div v-if="edit">
<el-popover
v-model:visible="showPopover"
trigger="manual"
@ -53,17 +52,19 @@
@dataChange="tdChange"
@selection-change="selectionChange"
>
<el-table-column v-if="multiple" type="selection" width="40" :reserve-selection="true"></el-table-column>
<el-table-column
v-if="multiple"
type="selection"
width="40"
:reserve-selection="true"
></el-table-column>
<slot v-if="!isFixOptions"></slot>
<template v-else>
<el-table-column
:prop="props.labelField"
></el-table-column>
<el-table-column :prop="props.labelField"></el-table-column>
</template>
</scTable>
</el-popover>
</div>
</div>
</template>
<script setup>
@ -103,27 +104,34 @@ onMounted(() => {
if (props.label) {
selectLabel.value = props.label;
}
else {
} else {
if (props.multiple) {
if (isFixOptions.value) {
selectLabel.value = props.options.filter(item => props.modelValue.includes(item[props.valueField])).map(item => item[props.labelField]).join(props.splitField);
selectLabel.value = props.options
.filter((item) =>
props.modelValue.includes(item[props.valueField])
)
.map((item) => item[props.labelField])
.join(props.splitField);
} else if (props.obj && props.obj.length > 0) {
selectLabel.value = props.obj
.map((item) => item[props.labelField])
.join(props.splitField);
}
else if (props.obj && props.obj.length > 0) {
selectLabel.value = props.obj.map(item => item[props.labelField]).join(props.splitField);
}
}
else {
} else {
if (isFixOptions.value) {
const selectedOption = props.options.find(item => item[props.valueField] === props.modelValue);
selectLabel.value = selectedOption ? selectedOption[props.labelField] : "";
}
else {
const selectedOption = props.options.find(
(item) => item[props.valueField] === props.modelValue
);
selectLabel.value = selectedOption
? selectedOption[props.labelField]
: "";
} else {
selectLabel.value = props.obj[props.labelField];
}
}
}
})
});
const isFixOptions = ref(false);
const tableData = ref(null);
@ -134,8 +142,8 @@ const selectObj = computed({
},
set(val) {
emit("update:obj", val);
}
})
},
});
const selectValue = computed({
get() {
@ -167,8 +175,7 @@ const rowClick = (row) => {
const handleClear = () => {
if (props.multiple) {
selectObj.value = [],
selectLabel.value = "";
(selectObj.value = []), (selectLabel.value = "");
selectValue.value = [];
} else {
selectObj.value = {};
@ -180,16 +187,17 @@ const handleClear = () => {
const tdChange = (res, tableData) => {
// if(obj.value && multiple){
// }
}
};
const selectionChange = (val) => {
if (props.multiple) {
selectObj.value = val;
selectValue.value = val.map(item => item[props.valueField]);
selectValue.value = val.map((item) => item[props.valueField]);
selectLabel.value = val.map(item => item[props.labelField]).join(props.splitField);
selectLabel.value = val
.map((item) => item[props.labelField])
.join(props.splitField);
emit("update:label", val);
}
};