directives: {
'el-select-loadmore': (el, binding) => {
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
if (SELECTWRAP_DOM) {
SELECTWRAP_DOM.addEventListener('scroll', function () {
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
if (condition) binding.value()
})
}
}
}
<el-table-column label="设备品牌" align="center">
<template slot-scope="scope">
<el-input :disabled="disabled" v-show="scope.row.hidden" v-model="scope.row.brandName"
@focus="focusInput(scope.$index, scope.row)">
</el-input>
<el-select v-show="!scope.row.hidden" class="order-cover-select" v-model="scope.row.brandId"
@visible-change="visibleChange" clearable placeholder="请选择品牌"
filterable collapse-tags v-el-select-loadmore="loadmore"
:filter-method="filterVmModel">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
focusInput (id, row) {
row.hidden = false
this.filterVmModel(row.brandName)
}
visibleChange (flag) {
if (flag) {
this.filterVmModel()
}
},
loadmore (firstTag) {
if (!this.filterText) {
if (!firstTag) {
this.query.page++
}
const begin = this.query.limit * (this.query.page - 1)
const end = (this.query.limit * (this.query.page - 1)) + this.query.limit
this.options.push(...this.brandList.slice(begin, end))
}
},
filterVmModel (value) {
this.filterText = value
if (value) {
this.options = this.brandList.filter(item => {
if (item.name && item.name.indexOf(value) !== -1) {
return true
} else {
return false
}
})
} else {
this.options = []
this.$nextTick(() => {
this.options = this.brandList.slice(0, this.query.limit * this.query.page)
})
}
},