168wangxiao-ui v0.3.61
安装
npm install -S 168wangxiao-ui
引入
/** 引入 */
import WangxiaoUI from '168wangxiao-ui'
/** 挂载 */
Vue.use(WangxiaoUI);
columns:表头数据
必须:是
类型:Array
默认值: []
字段说明:prop:"对应 data 数据字段",label:"表头名称"
data:列表数据
必须:是
类型:Array
默认值:[]
showPagination:是否显示分页
类型:Boolean
默认值:true
可选值:true | false
frontendPaging:前端分页
类型:Boolean
默认值:false
可选值:true | false
pagination:前端分页
类型:Object
默认值:false
可选值:true | false
:::tip 演示
<package-table :frontendPaging="true" :data="dataata" :columns="columns">
</package-table>
:::
BackendPaging:后端分页
类型:Boolean
默认值:false
可选值:true | false
分页参数:endPage
类型:Object
默认值:{
currentPage: 1,
pageSize: 10,
total: 0
}
headerCellStyle:表头单元格样式配置
可选值:Function | Object
默认值:
{
'background-color': '#f5f6f7',
'font-size': '12px',
'padding': '10px',
}
cellStyle:表格单元格的样式配置
可选值:Function | Object
默认值:
{
'font-size': '12px',
'padding': '10px'
}
paging:自定义分页
:::tip 例如
<package-table :data="data" :columns="columns">
<template #paging="tempPagination">
分页
</template>
</package-table>
:::
完整案例
<template>
<package-table
:data="gridData"
:columns="columns"
@size-change="endSizeChange"
@current-change="endCurrentChange" >
</package-table>
</template>
<script>
export default {
data(){
return {
gridData: [{
name: "杨胜军",
age: 18
}],
columns: [
{
prop: 'selection',
type: 'selection',
width: 80
},{
prop: "name",
label: "姓名",
width: 200,
sortable: true,
},
],
}
},
methods: {
endSizeChange(val){
console.log(val);
},
endCurrentChange(val){
console.log(val);
}
}
}
</script>
组件传参
props: {
columns: {
type: Array,
default: () => []
},
data: {
type: Array,
default: () => []
},
headerCellStyle: {
type: Function || Object,
default: () => {
return {
'background-color': '#f5f6f7',
'font-size': '12px',
'padding': '10px',
}
}
},
cellStyle: {
type: Function || Object,
default: () => {
return {
'font-size': '12px',
'padding': '10px'
}
}
},
/** 是否显示分页 */
showPagination: {
type: Boolean,
default: true,
},
/** 前端分页 */
frontendPaging: {
type: Boolean,
default: false,
},
/** 前端分页参数 */
FrontPage: {
type: Object,
default: () => ({})
},
/** 后端分页 */
BackendPaging: {
type: Boolean,
default: true,
},
/** 后端分页参数 */
endPage: {
type: Object,
default: () => {
return {
currentPage: 1,
pageSize: 10,
total: 0
}
}
},
pageSizes: {
default() {
return [10, 20, 30, 50, 100];
},
type: Array
},
layout: {
default() {
return 'total, sizes, prev, pager, next, jumper';
},
type: String
},
},
3 days ago
15 days ago
21 days ago
22 days ago
22 days ago
22 days ago
28 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
10 months ago
10 months ago
7 months ago
10 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
8 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago