前言
一个基于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>
扩展
你也可以直接挂载全局上Vue.component("v-CommonTable", CommonTable);
扩展起来的话，需要什么增加什么参数就好了，就像下面这样；
学无止境,谦卑而行.
