v-table-main

基于Vue、element-ui的通用表格筛选器，支持高级模式和精简模式，只需简单的配置即可，拿来即用。

Usage no npm install needed!

<script type="module">
  import vTableMain from 'https://cdn.skypack.dev/v-table-main';
</script>

README

v-table-main

基于Vue、element-ui的通用表格筛选器，支持高级模式和精简模式，只需简单的配置即可，拿来即用。

Installing

install with npm

npm install --save v-table-main

Import into your component:

import TableMain from 'v-table-main';
export default{
    components:{TableMain}
}

Useage:


<TableMain ref="table" :columnItems="columnItems" :api="api" :listQuery="listQuery" border></TableMain>


export default {
    components: {TableFilter},
    data() {
        return {
            listQuery: {
                pageSize:10,
                pageIndex: 1
            }, 
            api: ()=>{return Promise.resolve({result:{data:[
                {"cloudType":"aliyun","cpus":1,"eniQuantity":1,"flavorId":"1272833273558597632","flavorName":"ecs.t1.xsmall","gpus":0,"memorySize":0.5,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":2,"flavorId":"1272833670587219968","flavorName":"ecs.t5-lc2m1.nano","gpus":0,"memorySize":0.5,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":1,"flavorId":"1272833144202067968","flavorName":"ecs.n1.tiny","gpus":0,"memorySize":1,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":2,"flavorId":"1272834835144114176","flavorName":"ecs.s6-c1m1.small","gpus":0,"memorySize":1,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":1,"flavorId":"1272833156709482496","flavorName":"ecs.t1.small","gpus":0,"memorySize":1,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":2,"flavorId":"1272833656284643328","flavorName":"ecs.t5-lc1m1.small","gpus":0,"memorySize":1,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":2,"flavorId":"1272833362138103808","flavorName":"ecs.xn4.small","gpus":0,"memorySize":1,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":1,"flavorId":"1272834596815372288","flavorName":"ecs.ht6c.small","gpus":0,"memorySize":2,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":1,"flavorId":"1272833148618670080","flavorName":"ecs.n1.small","gpus":0,"memorySize":2,"providerId":""},{"cloudType":"aliyun","cpus":1,"eniQuantity":2,"flavorId":"1272833365988474880","flavorName":"ecs.n4.small","gpus":0,"memorySize":2,"providerId":""}
            ],total: 80}})},
            columnItems:[
                { "prop": "flavorName", "label": "规格名称", "name": "规格名称","tooltip":true},
                { "prop": "cpus", "label": "CPU（核）", "name": "CPU（核）","tooltip":true},
                { "prop": "memorySize", "label": "内存（GB）", "name": "内存（GB）","tooltip":true},
                { "prop": "gpus", "label": "GPU（核）","name": "GPU（核）","tooltip":true},
                { "prop": "cloudType", "label": "云平台"}
            ]
        }
    },
    methods: {
        search(){
            console.log(this.listQuery)
        },
    }
}

Demo

Demo Url: https://tuchongyang.github.io/v-table-main

screenshort