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

最新推荐文章于 2024-08-22 18:49:19 发布

原创

最新推荐文章于 2024-08-22 18:49:19 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍如何在Vue.js项目中结合Element-UI库，封装一个只在hover时显示的可编辑Table Select组件。内容包括组件的设计思路，如TableEditorSelect.vue仅做样式封装，以及TableSelectBusse.vue作为独立的业务请求中间层，负责处理首次点击时的异步请求，获取Select选项并更新接口操作。示例在App.vue中展示。

环境

# 安装 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