首页 > 其他分享 >ElementUI——vue2+element-ui 2.x的动态表格和表单

ElementUI——vue2+element-ui 2.x的动态表格和表单

时间:2023-08-18 10:57:00浏览次数:42  
标签:封装 name ElementUI formData element ui 组件 label data

前言

一个基于vue2.x + element-ui 2.x版本的项目,里面都是CURD的东西,但是前人并未封装组件,而是直接CV,现在要新增一个大模块的功能,就想着封装个组件,后面再基于这个组件对老项目进行改造;

虽然是一个大模块,但是功能还是比较简单的,结构如下;

内容

?> 这纯粹是个简单的DEMO,如果你需要更复杂的可基于此进行封装,或者直接使用现有的一些NPM包;
我不使用,是因为这个老项目有太多冗余的东西了,还不如直接封装来的舒服;

组件封装

<template>
<div class="app-container">
  <!-- 查询表单 -->
<el-form :inline="true" :model="formData" ref="ruleForm">
 <el-form-item  v-for="item in formItems" :label="item.label" :key="item.name">
     <component
      :is="item.type"
      v-model="formData[item.name]"
      :placeholder="item.placeholder"
    >
 // TODO 下拉框选项
</component>
 </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">查询</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

<!-- 动态表格 -->
  <el-table :data="data" border fit highlight-current-row style="width: 100%" >
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
    </el-table-column>
  </el-table>
</div>
</template>
<script>
export default {
    props: {
    formItems: Array,
    data: Array,
    columns: Array,
  },
  data() {
    return {
        formData: {}
    }
  },
  created() { },
  methods: {
    submitForm() {
        console.log(`children search ===>`, this.formData);
        this.$emit('search', this.formData)
      },
      resetForm() {
        this.formData = {}
      }
  }

}
</script>


</style>

使用示例

<template>
  <div class="app-container">
  <common-table :data="tableData" :columns="columns" :form-items="formItems" @search="handleSearch"/>
  </div>
</template>

<script>
import commonTable from './components/table/index.vue'

export default {
components: {
    commonTable
  },
  data() {
    return {
      formItems: [
        {
          type: "el-input",
          label: "昵称",
          name: "nickname",
          placeholder: "请输入抖音昵称"
        },
        {
          type: "el-input",
          label: "抖音号",
          name: "tiktok_no",
          placeholder: "请输入账号昵称"
        }
      ],
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          name: '张三',
          address: '北京'
        },
        {
          name: '李四',
          address: '上海'
        }
      ],
   }
  },
  created() {

  },
  methods: {
    handleSearch(data) {
      // TODO 处理查询
      console.log('parent | search data ====>', data)
     }
  }
}
</script>
<style lang="scss" scoped></style>

标签:封装,name,ElementUI,formData,element,ui,组件,label,data
From: https://www.cnblogs.com/wangyang0210/p/17639810.html

相关文章

  • Docker Build Cache 缓存清理
    Docker18.09引入了BuildKit,提升了构建过程的性能、安全、存储管理等能力。dockersystemdf命令,类似于Linux上的df命令,用于查看Docker的磁盘使用情况:[root@test/]#dockersystemdfTYPETOTALACTIVESIZE......
  • StringBuilder与StringBuffer的区别
    摘要在Java编程中,字符串的拼接是一项常见的操作。为了有效地处理字符串的拼接需求,Java提供了两个主要的类:StringBuilder和StringBuffer。尽管它们都是可变的字符串容器,但在一些关键方面有所不同。以下主要根据现场安全以及性能方面进行分析:线程安全性StringBuffer是线程安全的,而Str......
  • .NET应用UI组件DevExpress XAF v23.1 - 全新的日程模块
    DevExpressXAF是一款强大的现代应用程序框架,允许同时开发ASP.NET和WinForms。DevExpressXAF采用模块化设计,开发人员可以选择内建模块,也可以自行创建,从而以更快的速度和比开发人员当前更强有力的方式创建应用程序。在新版中,DevExpressXAF组件发布了全新的日程模块、能自定义详......
  • bh001- Blazor hybrid / Maui 使用摄像头和扫码快速教程
    1.建立工程bh001_camera_barcode源码2.添加nuget包BlazorHybrid.Maui.Permissions因为源码比较长,主要是一些检查和申请权限相关代码,就不占用篇幅列出,感兴趣的同学直接打开源码参考3.添加安卓摄像头权限双击编辑文件,或者手工添加<uses-permissionandroid:name="a......
  • 为什么 cl_gui_dialogbox_container 只能在 at selection output 事件中使用
    首先,我们来了解一下cl_gui_dialogbox_container类。这是SAP的一个类,用于创建一个对话框容器,通常用于在对话框中显示一些GUI控件,例如:图形、控件等。cl_gui_dialogbox_container对象主要用于在模态对话框中创建自定义容器,它允许我们将GUI控件(如ALVGRID,HTMLViewer等)嵌入......
  • 小米 红米 Redmi MIUI 5G开关
    小米红米RedmiMIUI5G开关1、打开手机拨号界面输入*#*#54638#*#*之后拨号界面底部会显示display5Gnetworkmenu(显示5G网络菜单)注意:先是星井,后是井星。2、重新打开手机设置>>双卡与移动网络进入之后就可以看到5G网络开关功能选项 ......
  • element-ui使用巧技
    1.全局修改定义message提示信息//大写的Message是个构造函数//1是重新定义构造函数来挂载到原型覆盖原来的。//2是直接引入Message重新定义它的原型方法。importElement,{Message}from'element-ui'constmessage=function(options){letopt=Object.assign(op......
  • 解锁数据潜力:信息抽取、数据增强与UIE的完美融合
    解锁数据潜力:信息抽取、数据增强与UIE的完美融合1.信息抽取(InformationExtraction)1.1IE简介信息抽取是NLP任务中非常常见的一种任务,其目的在于从一段自然文本中提取出我们想要的关键信息结构。举例来讲,现在有下面这样一个句子:新东方烹饪学校在成都。我们想要提取这句......
  • vue + element 表设计
    <template><divclass="course-table"><el-scrollbarstyle="height:100%"><divclass="course-table-content"><divclass="top":style="{width:......
  • Mosquitto使用介绍:轻松构建MQTT通信
    在物联网(IoT)领域,实现设备之间的高效通信是至关重要的。MQTT(MessageQueuingTelemetryTransport)是一种轻量级的消息传输协议,适用于各种物联网应用。而Mosquitto作为MQTT协议的代表,为开发者提供了便捷的通信方式。本文将介绍如何使用Mosquitto构建MQTT通信,实现设备间的数据传输和交......