多功能列表组件

本节主要介绍多功能列表组件的使用。此列表组件包含有数据的添加、修改、删除、展开、搜索、筛选、分页、导入及导出EXCEL等功能。

• 界面预览：

ElementUI版

• 源码地址： https://github.com/emei8/vue-vuecmf-table
• npmjs地址： https://www.npmjs.com/package/vue-vuecmf-table

iView版

• 源码地址： https://github.com/emei8/vuecmf-table
• npmjs地址： https://www.npmjs.com/package/vuecmf-table

使用方法：

项目中安装vuecmf列表组件

# === ElementUI版 ===
# 命令行中yarn方式安装 vue-vuecmf-table
yarn add vue-vuecmf-table

# 命令行中npm方式安装 vue-vuecmf-table
npm install vue-vuecmf-table

# === iView版 ===
# 命令行中yarn方式安装 vuecmf-table
yarn add vuecmf-table

# 命令行中npm方式安装 vuecmf-table
npm install vuecmf-table

项目模板页中引入

import vcTable from 'vue-vuecmf-table' # iView版本的使用 vuecmf-table
Vue.use(vcTable)

模板中使用组件

<vc-table  :edit="true" :del="true" :selectable="selectable" :checkbox="true"  ref="vcTable"  :cell-event="cellEvent" :row-action="rowAction" server="http://www.vuecmf.com/api/model_field" page="page" :limit="20"  :operate-width="200">
      <template v-slot:headerAction>
        <el-button size="mini" type="primary" @click.native.prevent="add" >添加</el-button>
      </template>
</vc-table>

后端返回JSON 数据样例：

• 字段数据样例

后端接收前端POST数据中 action = getField 返回JSON

{
    code:0,
    msg:'拉取成功',
    "data":{
        "fields": [
            {
                "prop": "id",  //字段名称
                "label": "",  //表头显示名称
                "data_type": "int", //字段值类型
                "sortable": true, //是否可排序
                "show": false, //默认是否在表格中显示
                "fixed": false, //是否固定列
                "filter": false //是否可筛选
            },
            {
                "prop": "inquiry_sheet_id",
                "label": "inquiry_sheet的id",
                "data_type": "hidden",
                "sortable": true,
                "show": false,
                "fixed": false,
                "filter": false
            },
            {
                "prop": "sku",
                "label": "sku",
                "data_type": "string",
                "sortable": true,
                "show": true,
                "fixed": false,
                "filter": true
            }
        }

 }

列表数据样例

{
    code:0,
    msg:'拉取成功',
    "data":{
        "total": 53,
        "last_page": 3,
        "data": [
            {
                "id": "63",
                "sku": "EUR001",
                "area": "欧洲区",
                "sku_name": "VC泡腾片 樱桃味 20片",
                "upc": "8905615274539",
                "unit": "瓶",
                "currency": "1",
                "quantity": "100",
                "unit_price": "89.0000",
                "status": "10"
            },
            {
                "id": "62",
                "sku": "EUR019",
                "area": "欧洲区",
                "sku_name": "南瓜籽蔓越莓胶囊 30粒",
                "upc": "7826600561310",
                "unit": "盒",
                "currency": "4",
                "quantity": "200",
                "unit_price": "56.0000",
                "status": "10"
            },
            {
                "id": "60",
                "sku": "EUR002",
                "area": "欧洲区",
                "sku_name": "VC泡腾片 香橙味 微量元素 20片",
                "upc": "9905615205298",
                "unit": "瓶",
                "currency": "3",
                "quantity": "300",
                "unit_price": "89.0000",
                "status": "10"
            }      
        ]
    }
}