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

思索

发布于 2024-08-15 09:35:22

18800

代码可运行

运行总次数：0

代码可运行

前言

一个基于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>