基于 vue 与 element-ui 封装 table 中可编辑 select 组建

环境

# 安装 vue 脚手架
npm install -g @vue/cli
# 使用脚手架初始化项目
vue create element-demo
# 添加 element-ui 框架（使用 sass 预处理器）
vue add element-ui
npm install -D sass sass-loader
# 启动项目
npm run serve

文件结构

|-src
|-components
|-TableEditorSelect.vue
|-TableSelectBusse.vue
|-App.vue

TableEditorSelect.vue 组件

只有 hover 的时候才显示的 select 组建，仅仅做了样式的封装

<template>
<el-select
:disabled="requesting"
:loading="loading"
:value="value"
@mouseenter.native="isHide = false"
@mouseleave.native="isHide = true"
@input="e => { $emit('input', e) }"
:placeholder="placeholder"
class="component table-editor-select"
:class="[{'hide': isHide || requesting}]">
<el-option v-for="item in options" :key="item.value" :value="item.value">{{item.label}}</el-option>
</el-select>
</template>

<script>
export default {
name: 'TableEditorSelect',
props: {
placeholder: {
type: String,
default: '请选择'
},
options: { // 备选项
type: Array,
required: true
},
requesting: { // 提交修改请求
type: Boolean,
default: false
},
loading: { // 加载备选项
type: Boolean,
default: false
},
value: { // 选中的选项
}
},
data: () => ({
isHide: true
})
}
</script>

<style lang="scss">
.component.table-editor-select {
&.hide {
:not(.is-focus) .el-input__inner, :not(.is-focus) .el-input__inner:hover {
border-color: transparent !important;
background-color: transparent !important;
}
:not(.is-focus) .el-input__suffix {
opacity: 0;
}
}
}
</style>

TableSelectBusse.vue 组件

独立业务请求中间层，在这一层判断是否为第一次点击，并异步求情 select 组件的选项列表，并将更新调用借口的操作封装到这一层

<template>
<table-editor-select
@click.native="initOptions()"
:value="localValue"
:loading="loading"
:requesting="requesting"
:options="options"
@input="editorSelect">
</table-editor-select>
</template>

<script>
import TableEditorSelect from './TableEditorSelect.vue'

export default {
name: 'TableSelectBusse',
props: {
value: {}
},
data: () => ({
loading: false, // 加载备选项
requesting: false, // 变更请求
loaded: false, // 第一次请求完备选项后，如果返回的备选项为空，则接下来不再进行任何请求
localValue: '', // 当前选中值
oldValue: '', // 之前选中值，在请求失败后回显
options: [] // 备选项列表
}),
created () {
// 添加默认值
this.localValue = this.value
this.oldValue = this.value
},
methods: {
initOptions () { // 请求备选项
if (this.loading || this.loaded) {
return
}
this.loading = true
setTimeout(() => {
this.loading = false
this.loaded = true
this.options = [{
value: 1,
label: '选项一'
}, {
value: 2,
label: '选项二'
}, {
value: 3,
label: '选项三'
}]
}, 2000)
},
editorSelect (v) { // 变更
if (this.localValue === v ) { // 如果变更目标结果和当前选中的值相同，则不进行任何操作
return
}
this.oldValue = this.localValue // 将变更前的值储存起来
this.requesting = true
this.localValue = v // 立即显示变更后的值
setTimeout(() => { // 开始请求变更
const hasError = false
if (hasError) {
this.localValue = this.oldValue // 请求错误的话回显之前的数据
this.$message.error('更新失败...')
} else {
this.$message({
message: '更新成功',
type: 'success'
})
}
this.requesting = false
}, 2000)
}
},
components: {
TableEditorSelect
}
}
</script>

<style lang="scss">
</style>

App.vue

使用的 table 部分

<template>
<el-card>
<div slot="header" class="clearfix">
<span>测试表格</span>
</div>
<el-table
:data="tableData">
<el-table-column
label="下拉框">
<template slot-scope="scope">
<table-select-busse :value="1"></table-select-busse>
</template>
</el-table-column>
<el-table-column
label="输入框">
<template slot-scope="scope">
{{scope.row}}
</template>
</el-table-column>
</el-table>
</el-card>
</template>

<script>
import TableSelectBusse from './components/TableSelectBusse.vue'

export default {
name: 'App',
data: () => ({
tableData: ['一行数据']
}),
mounted () {},
components: {
TableSelectBusse
}
}
</script>

<style>
.app {}
</style>

代码仓库