feat: xselect edit参数更改
This commit is contained in:
parent
177446d8c2
commit
27fd49a690
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-input ref="inputRef" v-model="selectLabel" :readonly="true">
|
||||
<template #prefix>
|
||||
<template #prefix v-if="edit">
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
circle
|
||||
icon="el-icon-search"
|
||||
@click="showPopover=true"
|
||||
@click="showPopover = true"
|
||||
></el-button>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<template #suffix v-if="edit">
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
|
|
@ -21,48 +21,49 @@
|
|||
></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div v-if="edit">
|
||||
<el-popover
|
||||
v-model:visible="showPopover"
|
||||
trigger="manual"
|
||||
virtual-triggering
|
||||
:virtual-ref="inputRef"
|
||||
:width="tableWidth"
|
||||
<el-popover
|
||||
v-model:visible="showPopover"
|
||||
trigger="manual"
|
||||
virtual-triggering
|
||||
:virtual-ref="inputRef"
|
||||
:width="tableWidth"
|
||||
>
|
||||
<el-input
|
||||
v-if="!isFixOptions"
|
||||
v-model="keyword"
|
||||
placeholder="关键词查找"
|
||||
@keyup.enter="handleQuery"
|
||||
></el-input>
|
||||
<div style="height: 2px"></div>
|
||||
<scTable
|
||||
v-if="showPopover"
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
:data="tableData"
|
||||
:params="params"
|
||||
:query="query"
|
||||
:height="tableHeight"
|
||||
row-key="id"
|
||||
stripe
|
||||
@row-click="rowClick"
|
||||
:hidePagination="hidePagination"
|
||||
paginationLayout="prev, pager, next"
|
||||
hideDo
|
||||
@dataChange="tdChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-input
|
||||
v-if="!isFixOptions"
|
||||
v-model="keyword"
|
||||
placeholder="关键词查找"
|
||||
@keyup.enter="handleQuery"
|
||||
></el-input>
|
||||
<div style="height: 2px"></div>
|
||||
<scTable
|
||||
v-if="showPopover"
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
:data="tableData"
|
||||
:params="params"
|
||||
:query="query"
|
||||
:height="tableHeight"
|
||||
row-key="id"
|
||||
stripe
|
||||
@row-click="rowClick"
|
||||
:hidePagination="hidePagination"
|
||||
paginationLayout="prev, pager, next"
|
||||
hideDo
|
||||
@dataChange="tdChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
</scTable>
|
||||
</el-popover>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
</scTable>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -70,7 +71,7 @@
|
|||
import { ref, defineProps, defineEmits, computed, onMounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
multiple: { type: Boolean, default: false },
|
||||
multiple: { type: Boolean, default: false },
|
||||
edit: { type: Boolean, default: true },
|
||||
hidePagination: { type: Boolean, default: false },
|
||||
tableWidth: { type: Number, default: 600 },
|
||||
|
|
@ -78,7 +79,7 @@ const props = defineProps({
|
|||
apiObj: { type: Object, default: null },
|
||||
params: { type: Object, default: () => {} },
|
||||
label: { type: [String, Number, Array], default: "" },
|
||||
obj: { type: Object, default: () => {} },
|
||||
obj: { type: Object, default: () => {} },
|
||||
modelValue: { type: [String, Number, Array], default: null },
|
||||
labelField: { type: String, default: "name" },
|
||||
valueField: { type: String, default: "id" },
|
||||
|
|
@ -95,35 +96,42 @@ const table = ref();
|
|||
const hidePagination = ref(props.hidePagination);
|
||||
|
||||
onMounted(() => {
|
||||
if(props.options != null) {
|
||||
if (props.options != null) {
|
||||
isFixOptions.value = true;
|
||||
tableData.value = props.options;
|
||||
hidePagination.value = true;
|
||||
}
|
||||
|
||||
if(props.label) {
|
||||
|
||||
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() {
|
||||
|
|
@ -157,20 +165,19 @@ const handleQuery = () => {
|
|||
};
|
||||
|
||||
const rowClick = (row) => {
|
||||
if(!props.multiple){
|
||||
selectObj.value = row;
|
||||
selectLabel.value = row[props.labelField];
|
||||
selectValue.value = row[props.valueField];
|
||||
showPopover.value = false;
|
||||
}
|
||||
if (!props.multiple) {
|
||||
selectObj.value = row;
|
||||
selectLabel.value = row[props.labelField];
|
||||
selectValue.value = row[props.valueField];
|
||||
showPopover.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
if(props.multiple){
|
||||
selectObj.value = [],
|
||||
selectLabel.value = "";
|
||||
if (props.multiple) {
|
||||
(selectObj.value = []), (selectLabel.value = "");
|
||||
selectValue.value = [];
|
||||
}else{
|
||||
} else {
|
||||
selectObj.value = {};
|
||||
selectLabel.value = "";
|
||||
selectValue.value = null;
|
||||
|
|
@ -178,19 +185,20 @@ const handleClear = () => {
|
|||
emit("update:label", "");
|
||||
};
|
||||
|
||||
const tdChange = (res, tableData) =>{
|
||||
// if(obj.value && multiple){
|
||||
|
||||
// }
|
||||
}
|
||||
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]);
|
||||
if (props.multiple) {
|
||||
selectObj.value = val;
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue