爱站程序员基地Table.vue
<template><div><el-table:height=\"settings.height\"v-loading=\"settings.isLoading\":border=\"settings.isBorder\"@selection-change=\"e => handleClick(\'select\',e)\":data=\"data\"style=\"width: 100%\"><el-table-column v-if=\"settings.isSelection\" width=\"55\" type=\"selection\" fixed align=\"center\"></el-table-column><el-table-column v-if=\"settings.isIndex\" type=\"index\" :index=\"1\" fixed align=\"center\"></el-table-column><template v-for=\"(item,index) in header\"><el-table-columnv-if=\"item.prop!==\'action\'\":key=\"item.prop\":type=\"item.type\":prop=\"item.prop\":label=\"item.label\":width=\"item.width\":fixed=\"item.fixed\"align=\"center\"></el-table-column><el-table-columnv-else:key=\"item.prop\":label=\"item.label\":width=\"item.width\":fixed=\"item.fixed\"align=\"center\"><template slot-scope=\"scope\"><template v-if=\"item.arr\"><el-buttonsize=\"mini\":type=\"item2.type==\'delete\'?\'danger\':\'primary\'\"v-for=\"item2 in item.arr\":key=\"item2.type\"@click=\"handleClick(item2.type, scope.row,scope.$index)\">{{item2.name}}</el-button></template></template></el-table-column></template></el-table><el-paginationv-if=\"settings.isPagination\"backgroundstyle=\"text-align:right;padding:6px 0\"@size-change=\"e=>handleClick(\'pageSize\',e)\"@current-change=\"e=>handleClick(\'currentPage\',e)\":current-page=\"currentPage\":page-sizes=\"[20, 50, 100, 200]\":page-size=\"20\"layout=\"total, sizes, prev, pager, next, jumper\":total=\"settings.total\"></el-pagination></div></template><script>/*传值说明:settings:{ 相关配置isLoading加载数据时显示动效height表格高度autoHeight:true 是否自动高度isSelection; 是否有多选selectionWidth多选的宽度isIndex 是否需要序列号,默认不需要isBorder:是否加框线,默认添加,isPagination:是否添加分页,默认false,total: 列表总条数currentPage 当前页数}tableData: { 表格数据}tableHeader:{表头字段isTemplate 是否使用插槽isImagePopover 图片带tooltip}事件说明:handleClick参数 type 点击的类型,如选择select, 多选时编辑edit, 按钮为编辑时查看show, 按钮为查看时删除delete, 按钮为删除时当前条数pageSize, 开启分页时当前页数currentPage等 开启分页时e 选中项i 选中索引*/export default {name: \"\",props: {data: { type: Array, default: () => [] },header: { type: Array, required: true },settings: {type: Object,default: () => {return {height: null,isBorder: true,isLoading: false,isIndex: false,isSelection: false,isPagination: false,currentPage: 1,total: 20};}}},computed: {currentPage: function() {return this.settings.currentPage;}},watch: {settings: {handler: function(e) {// console.log(e);if (typeof e.isBorder === \"undefined\") e.isBorder = true;if (typeof e.total === \"undefined\") e.total = 20;},immediate: true}// currentPage: function(e) {// console.log(e);// }},methods: {handleClick(type, e, i) {this.$emit(\"select\", e);}}};</script><style lang=\"\" scoped></style>
使用示例
tableUse.vue
<template><div><h2>{{tableSettings.title}}</h2><v-table @select=\"handleSelect\" :data=\"tableData\" :header=\"tableHeader\" :settings=\"tableSettings\" /></div></template><script>import vTable from \"@/components/Table\";import constant from \"./constant\";export default {name: \"\",data() {return {tableData: [],tableHeade: [],tableSettings: {}};},components: { vTable },methods: {handleSelect(e) {// console.log(e);},},created() {this.tableHeader = constant.tableHeader;this.tableSettings = constant.tableSettings;for (let i = 0; i < 30; i++) {this.tableData.push({name: \"王小虎\",department: \"财务部\",workCode: \"SPT0108\",annualLeave: 1,privateAffairLeave: 1,sickLeave: 1,maternityLeave: 1,paternityLeave: 1,doubleOvertime: 100,threeOvertime: 1000,totalAllowance: 12222,attendanceCoefficient: 12,signature: \"王小虎\"});}}};</script>
constant.js
const width = 120;const tableSettings = {height: \"71vh\",title: \"自愿加班/请假申请表\",isPagination: true,total: 100// currentPage: 2// isIndex: true// isSelection: true};const tableHeader = [// { type: \"selection\", width: 120, fixed: true },{ prop: \"name\", label: \"姓名\", width, fixed: true },{ prop: \"department\", label: \"部门\", fixed: true },{ prop: \"workCode\", label: \"工号\", width, fixed: true },{ prop: \"annualLeave\", label: \"年假(天)\", width: 80 },{ prop: \"privateAffairLeave\", label: \"事假(小时)\", width: 90 },{ prop: \"sickLeave\", label: \"病假(小时)\", width: 90 },{ prop: \"maternityLeave\", label: \"产假(天)\", width: 80 },{ prop: \"paternityLeave\", label: \"陪产假(小时)\", width: 110 },{ prop: \"doubleOvertime\", label: \"二倍加班\", width },{ prop: \"threeOvertime\", label: \"三倍加班\", width },{ prop: \"totalAllowance\", label: \"津贴合计\", width },{ prop: \"attendanceCoefficient\", label: \"出勤系数\", width },{ prop: \"signature\", label: \"签字\", width }// {// prop: \"action\",// label: \"操作\",// width,// arr: [{ type: \"edit\", name: \"查看\" }]// }];export default { tableHeader, tableSettings };
