vue-common-com v1.0.7

super_admin

我们在开发页面的功能的时候，其实主要是表单和表格。但是每次写表单或者表格的时候会发现有很多重复的代码。所以我们可以带着封装的思想来进行封装。里面引入了 element 的组件。

Project setup

npm i vue-common-com

项目中引入

import vueCommonCom from 'vue-common-com/lib/vue-common-com.common'
import 'vue-common-com/lib/vue-common-com.css'

Vue.use(vueCommonCom)

1. 表格组件

• （1）引入表格组件

import pageTable from '@/components/table/pageTable.vue';

components: { pageTable }

• （2）传入表格的参数和方法

  <page-table
    :table-data="data"
    :table-list="tableList"
    :page_size="page_size"
    :page_index="page_index"
    :total="total"
    class="table-content"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    @buttonClick="buttonClick"
    @tableChange="tableChange"
  />

2. 表单组件

• （1）引入表格组件

import AlForm from '@/components/form/AlForm.vue';

components: { AlForm }

• （2）传入表格的参数和方法

   <al-form
    :form-list="saleFormList"
    :form-data="form"
    :form-config="formConfig"
    @buttonClick="buttonClick"
    @change="change"
  />