vue vuecmf table
V2.0.1
vue2 と element-ui に基づいたリスト コンポーネント。検索、フィルタリング、ページング、行展開、EXCEL へのエクスポートとインポートなどの組み込み機能が備わっています。
プロジェクトの説明: vuecmf-table で使用されるコンポーネントが iview に調整されているため、element-ui ユーザー向けに vuecmf-table の 1.0.6 バージョンから特別に分離されており、使用されるコンポーネントは element-ui です。
# yarn方式安装 vue-vuecmf-table
yarn add vue-vuecmf-table
# npm方式安装 vue-vuecmf-table
npm install vue-vuecmf-table import vcTable from 'vue-vuecmf-table'
Vue.use(vcTable)
<vc-table
table-name="会员列表"
:selectable="selectable"
:checkbox="true"
ref="vcTable"
server="http://www.xxxxxx.com/api/Table/index"
page="page"
:limit="20"
:operate-width="100"
import-server="http://www.xxxxxx.com/api/Table/importData"
:expand="true"
>
<!-- 表格头部左边 自定义按钮操作 -->
<template #headerAction="selectRows">
<el-button size="mini" type="primary" @click.native.prevent="add(selectRows)" >添加</el-button>
</template>
<!-- 列表每行 自定义按钮操作 -->
<template #rowAction="{ row, index}">
<span v-if=" row.site != '' ">
有站点
</span>
<el-button v-else size="mini" type="success" @click.native.prevent="test(row)">test {{ index }}</el-button>
</template>
<!-- 每行中的每个字段内容 自定义格式化内容显示： 可获取参数有 { row, field, type, options } -->
<template #formatRow="{ row, field }">
<span v-if=" field == 'child_account_name' ">
<el-input v-model="row[field]" size="small" clearable></el-input>
</span>
</template>
</vc-table>
詳しい使用方法については、ソース コードのexamples/App.vueを参照してください。
バックエンドはフロントエンド POST データを受信し、アクション = getField で JSON を返します。
{
code:0,
msg:'拉取成功',
"data":{
"fields": [
{
"prop": "id", //字段名称
"label": "ID", //表头显示名称
"data_type": "int", //字段值类型
"sortable": true, //是否可排序
"show": false, //默认是否在表格中显示
"fixed": false, //是否固定列
"filter": false //是否可筛选
},
{
"prop": "area",
"label": "地区",
"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": "7905615274539",
"unit": "瓶",
"currency": "1",
"quantity": "100",
"unit_price": "89.0000",
"status": "10",
"expandData":{
"type":"table",
"tableFields":[
{"label":"需求单号","prop":"order_sn"},
{"label":"调拨类型","prop":"type"},
{"label":"计划数量","prop":"num"}
],
"tableList":[
{"order_sn":"dbd903452","type":"POP","num":300},
{"order_sn":"dbd123123","type":"POP","num":400},
{"order_sn":"dbd144155","type":"POP","num":580}
]
}
},
{
"id": "62",
"sku": "EUR019",
"area": "欧洲区",
"sku_name": "南瓜籽蔓越莓胶囊 30粒",
"upc": "7926600561310",
"unit": "盒",
"currency": "4",
"quantity": "200",
"unit_price": "39.0000",
"status": "10",
"expandData":{
"type":"table",
"tableFields":[
{"label":"需求单号","prop":"order_sn"},
{"label":"调拨类型","prop":"type"},
{"label":"计划数量","prop":"num"}
],
"tableList":[
{"order_sn":"dbd903452","type":"POP","num":300},
{"order_sn":"dbd123123","type":"POP","num":400},
{"order_sn":"dbd144155","type":"POP","num":580}
]
}
},
{
"id": "60",
"sku": "EUR002",
"area": "欧洲区",
"sku_name": "VC泡腾片 香橙味 微量元素 20片",
"upc": "5605615205298",
"unit": "瓶",
"currency": "3",
"quantity": "300",
"unit_price": "59.0000",
"status": "10",
"expandData":{
"type":"table",
"tableFields":[
{"label":"需求单号","prop":"order_sn"},
{"label":"调拨类型","prop":"type"},
{"label":"计划数量","prop":"num"}
],
"tableList":[
{"order_sn":"dbd903452","type":"POP","num":300},
{"order_sn":"dbd123123","type":"POP","num":400},
{"order_sn":"dbd144155","type":"POP","num":580}
]
}
}
]
}
}
