v-table-main
v1.0.0
Published
基于Vue、element-ui的通用表格筛选器,支持高级模式和精简模式,只需简单的配置即可,拿来即用。
Downloads
1
Maintainers
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