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

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

HenryDZhang

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

阅读量1.4k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/github_38424391/article/details/105015593

版权

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

摘要由CSDN通过智能技术生成

环境

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