前言
一个基于vue2.x element-ui 2.x版本的项目，里面都是CURD的东西，但是前人并未封装组件，而是直接CV，现在要新增一个大模块的功能，就想着封装个组件，后面再基于这个组件对老项目进行改造；
虽然是一个大模块，但是功能还是比较简单的，结构如下；
内容
?> 这纯粹是个简单的DEMO，如果你需要更复杂的可基于此进行封装，或者直接使用现有的一些NPM包； 我不使用，是因为这个老项目有太多冗余的东西了，还不如直接封装来的舒服；
组件封装
代码语言：javascript复制<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>使用示例
代码语言：javascript复制<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); 扩展起来的话，需要什么增加什么参数就好了，就像下面这样；
