# 表格
# 描述
使用z-table可以缩减 90%的 html 标签编写，如果有特殊的展示需求，z-table支持插槽模式进行使用。并且不影响原el-table的使用
# 使用
# 普通表格
z-table 引入了 el-pagination，无需关注如何分页,z-table会自动帮你完成分页， 是否分页由 showPagination 字段控制,默认开启
el-pagination 的配置项可以像传递 tableData 一样直接传入.
点击查看代码
<!-- @format -->
<template>
<zTable class="z-table" ref="table" :tableColumn="tableColumn" :tableData="tableData" :height="300"> ></zTable>
</template>
<script>
export default {
name: 'zTableDemo',
data() {
const randomTableData = () => {
return new Array(20).fill(0).map((item, index) => {
const obj = {};
for (let i = 0; i <= 5; i++) {
obj[`name${i}`] = `第${i}列 ， 第${index}行`;
}
return obj;
});
};
return {
tableColumn: [
{
prop: 'name0',
label: '第0列'
},
{
prop: 'name1',
label: '第1列'
},
{
prop: 'name2',
label: '第2列'
},
{
prop: 'name3',
label: '第3列'
},
{
prop: 'name4',
label: '第4列'
}
],
tableData: randomTableData()
};
},
mounted() {
console.log(this.$refs.table.$refs.elTable.resizeState);
}
};
</script>
# 服务器分页表格
z-table 支持服务器分页,传入 :frontPagination='false' . 并且使用 pageIndexChange 回调函数，下面是一个例子
点击查看代码
<!-- @format -->
<template>
<zTable
class="z-table"
:tableColumn="tableColumn"
:tableData="tableData"
:paginationOption="paginationOption"
:frontPagination="false"
@page-change="handlePageChange"
@page-size-change="handlePageSizeChange"
v-loading="loading"
:total="total"
></zTable>
</template>
<script>
const randomTableData = (size) => {
return new Array(size).fill(0).map((item, index) => {
const obj = {};
for (let i = 0; i <= 5; i++) {
obj[`name${i}`] = `第${i}列 ， 第${index}行`;
}
return obj;
});
};
export default {
name: 'zTablePageDemo',
data() {
return {
tableColumn: [
{
prop: 'name0',
label: '第0列'
},
{
prop: 'name1',
label: '第1列'
},
{
prop: 'name2',
label: '第2列'
},
{
prop: 'name3',
label: '第3列'
},
{
prop: 'name4',
label: '第4列'
}
],
tableData: [],
paginationOption: {
layout: 'total,sizes, prev, pager, next, jumper',
pageSizes: [10, 20, 30, 40, 50],
pageSize: 10
},
total: 0,
loading: true
};
},
created() {
this.getData();
},
methods: {
handlePageChange(page) {
this.loading = true;
const tableDataSize = this.paginationOption.pageSize;
setTimeout(() => {
this.tableData = randomTableData(tableDataSize);
this.loading = false;
console.log('🚀 ~ this.tableData', this.tableData);
}, 1000);
},
handlePageSizeChange(pageSize) {
this.loading = true;
setTimeout(() => {
this.tableData = randomTableData(pageSize);
this.loading = false;
}, 1000);
},
getData() {
this.loading = true;
setTimeout(() => {
this.total = 100;
this.tableData = randomTableData(10);
this.loading = false;
}, 1000);
}
}
};
</script>
# 插槽 slot 操作列
操作列插槽为 z-table 默认插槽,接收三个参数 #default = { row , $index , column }.
点击查看代码
<!-- @format -->
<template>
<zTable class="z-table" :tableColumn="tableColumn" :tableData="tableData" :height="300" showIndex showFixed showOperation>
<template #name3="scope">
<div style="color: white; background-color: red; text-align: center" :style="scope.$index > 4 && 'background-color:blue;'">
{{ scope.$index }}
</div>
</template>
<template #default="scope">
<el-button type="text" size="mini" @click="editTable(scope)">{{ scope.row._view_ ? '保存' : '编辑' }}</el-button>
<el-button type="text" size="mini" @click="deleteTable(scope)">删除</el-button>
</template>
</zTable>
</template>
<script>
export default {
name: 'zTableSlotDemo',
data() {
const randomTableData = () => {
return new Array(20).fill(0).map((item, index) => {
const obj = {};
for (let i = 0; i <= 7; i++) {
obj[`name${i}`] = `第${i}列 ， 第${index}行`;
}
return obj;
});
};
return {
tableColumn: [
{
prop: 'name0',
label: '第0列',
'render-header': (h, params) => {
return h('div', { style: 'color: red;background-color: green' }, '第0列');
}
},
{
prop: 'name1',
label: '第1列',
sortable: true
},
{
prop: 'name2',
label: '第2列',
filters: [{ text: '第2列', value: '第2列' }],
'filter-method': () => {
console.log('🚀 ~ filter-method', 'filter-method');
}
},
{
prop: 'name3',
label: '第3列'
},
{
prop: 'name4',
label: '第4列'
}
],
tableData: randomTableData()
};
},
methods: {
editTable(scope) {
console.log('🚀 ~ scope', scope);
},
deleteTable(scope) {
console.log('🚀 ~ scope', scope);
this.tableData.splice(scope.$index, 1);
},
getScope(scope) {
console.log('🚀 ~ scope', scope);
}
}
};
</script>
# Table Attributes
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tableData | Array<{prop:string, label:string}> | [ ] | 表格数据 |
| tableColumn | Array | [ ] | 表格项 |
| showPagination | Boolean | true | 是否开启分页 |
| paginationOption | Object | {"layout": "total,sizes,prev,pager,next", "pageSize":10, "total":0, "currentPage":1} | 分页配置集合，支持所有的 pagination 配置项el-pagination组件 | Element (opens new window) |
| layout | String | total,sizes,prev,pager,next | 组件布局，子组件名用逗号分隔 |
| total | Number | 0 | 总条目数 |
| pageSize | Number | 10 | 每页显示条目个支持 .sync 修饰符 数 |
| currentPage | Number | 1 | 当前页,支持 .sync 修饰符数 |
| showIndex | Boolean | false | 是否展示序号 |
| showOperation | Boolean | false | 是否展示操作列 |
| showExpand | Boolean | false | 是否展示展开列 |
| showFixed | Boolean | false | 是否固定列 |
| showCheckbox | Boolean | false | 是否开启多选框 |
| page-change | Function | ... | 页码改变时的钩子函数 |
| page-size-change | Function | ... | 页面展示数量变化时的钩子函数 |
| ...... | ...... | ...... | ....其他属性,请参考el-table组件 | Element (opens new window) |
# Slot 列表
| 插槽名 | 使用方式 | 注意 |
|---|---|---|
| #default => 操作列插槽 | 查看插槽 slot 操作列 | 使用时必须将showOperation设置为true |
| #[prop] => prop是需要的插槽 | 查看插槽 slot 操作列 | 直接在z-table中编写就行,如果需要多级表头建议直接使用el-table |
| #[propheader] => propheader 是需要插槽的表头格式为 prop+'header' | 查看插槽 slot 操作列 | 如果在使用表头点击事件等等,使用插槽是最好的方式了,如果仅仅需要排序过滤等功能,建议在tableColumn中进行配置 |