<template>
|
<div>
|
<el-tooltip effect="light" content="点击搜索">
|
<i class="el-icon-search" @click="openSearchDialog"></i>
|
</el-tooltip>
|
<el-input
|
v-if="!option.data.length"
|
v-model="option.defaultDataRow"
|
size="small"
|
:placeholder="$t('placeholder.pleaseChoose') + option.prefix"
|
readonly
|
>
|
</el-input>
|
<el-select
|
v-else
|
v-model="option.select"
|
style="width: 100%; font-weight: bold"
|
@change="handleIdChange"
|
placeholder=""
|
size="small"
|
v-el-select-loadmore="loadmore"
|
:placeholder="$t('placeholder.pleaseChoose') + option.prefix"
|
>
|
<el-option
|
class="Select_head"
|
key="SelectHead"
|
value="SelectHead"
|
disabled
|
>
|
<span v-for="(prop, j) in option.columns" :key="prop">{{
|
$t('label.' + prop)
|
}}</span>
|
</el-option>
|
<el-option
|
v-if="!queryParams.loading & !option.data.length"
|
style="text-align: center; margin: 10px 0 5px 0"
|
key="NoData"
|
value="NoData"
|
disabled
|
>{{ $t('label.noData') }}</el-option
|
>
|
<el-option
|
class="Select_body"
|
v-else
|
v-for="(item, i) in option.data"
|
:key="'SearchSelect-' + i"
|
:label="option.formatter(item, option)"
|
:value="item.id"
|
>
|
<!-- <span>{{item.id}}</span> -->
|
<span v-for="(prop, j) in option.columns" :key="prop">{{
|
option.data[i][prop] || '--'
|
}}</span>
|
</el-option>
|
<el-option
|
v-if="
|
!queryParams.loading & (queryParams.current === queryParams.pages)
|
"
|
style="text-align: center"
|
key="NoMoreData"
|
value="NoMoreData"
|
disabled
|
>
|
{{ $t('label.noMoreData') }}
|
</el-option>
|
<el-option
|
v-show="false"
|
:label="option.formatter(dataForm, option)"
|
:value="dataForm.id"
|
></el-option>
|
<span
|
v-if="queryParams.loading"
|
v-loading="queryParams.loading"
|
style="
|
left: 0;
|
top: 0;
|
z-index: 2;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
"
|
></span>
|
</el-select>
|
<!-- {{option.data}} -->
|
<!-- {{option.select}} -->
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {}
|
},
|
props: {
|
dataForm: {},
|
loadmore: {},
|
handleIdChange: {},
|
queryParams: {},
|
openSearchDialog: {},
|
option: {
|
type: Object,
|
default: () => {
|
return { data: [], select: '' }
|
}
|
}
|
},
|
created() {},
|
mounted() {
|
console.log(this.option)
|
},
|
methods: {},
|
watch: {
|
'option.data': {
|
handler(val) {
|
console.log(val)
|
// 强制改为Number类型，不然页面展示的是字符串id
|
this.option.select = Number(
|
this.dataForm.id || this.$route.params.id || this.$route.query.id || 0
|
)
|
if (this.option.select === 0) {
|
this.option.select = ''
|
}
|
|
console.log(
|
this.option.data.length,
|
this.option.select,
|
'SearchSelectOption'
|
)
|
},
|
deep: true
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.salesman-select {
|
width: 100%;
|
}
|
|
.salesman-select-nodata {
|
text-align: center;
|
font-size: 13px;
|
line-height: 44px;
|
}
|
|
.salesman-select-head span,
|
.salesman-select-body span {
|
display: inline-block;
|
width: 150px;
|
font-size: 13px;
|
padding: 0 10px !important;
|
}
|
|
.salesman-select-head,
|
.salesman-select-body,
|
.salesman-select-nodata {
|
padding-left: 10px !important;
|
padding-right: 10px !important;
|
}
|
|
.salesman-select-head span:last-child,
|
.salesman-select-body span:last-child {
|
/*min-width: 100px;*/
|
text-align: right;
|
}
|
</style>
|
