这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战
1.封装el-table组件
<template>
<div class="eltable">
<el-table
ref="multipleTable"//获取元素的标识
:height="settings.height"//表格自定义高度
v-loading="settings.isLoading"//数据加载动画
@selection-change="(e) => handleClick('select', e)"//当选择项发生变化时会触发该事件
highlight-current-row//高亮行
@current-change="handleCurrentChange"//行发生变化时出发
@cell-click="handleCellclick"//当某个单元格被点击时会触发该事件
@select="handleSelect"//有勾选框单选
@select-all="handleSelectall"//有勾选框全选
:data="data.list"//表格展示数据
style="width: 100%"//表格宽度
row-key="id"//折叠表格必填项，行标识
:expand-row-keys="settings.expandrowkeys"//需要展开行的数组
:indent="0"//展开行缩紧
default-expand-all//默认关闭展开行
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"//展开行设置，有children默认就有展开行
>
//固定勾选框列，按需设置settings
<el-table-column
v-if="settings.isSelection"
width="55"
type="selection"
fixed
></el-table-column>
//固定排序列，按需设置settings
<el-table-column
v-if="settings.isIndex"
type="index"
:index="1"
fixed
label="序号"
width="60"
></el-table-column>
//默认数据展示
<template v-for="item in header">
<template v-if="item.prop !== 'action' && item.column != true">
<el-table-column
:key="item.prop"
:type="item.type"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
:show-overflow-tooltip="true"
></el-table-column>
</template>
<template v-if="item.column == true">
//某列数据单独处理插槽
<slot :name="item.prop"></slot>
</template>
</template>
//操作列之类的插槽
<slot name="action"></slot>
</el-table>
//翻页组件封装
<el-pagination
v-if="settings.isPagination"
background
style="text-align:right;padding:25px 15px 25px 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: "",
data() {
return {};
},
props: {
data: { type: Object, 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;
},
},
mounted() {},
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,
},
'settings.expandrowkeys'() {
//展开行手风琴效果设置
this.data.list.map((item) => {
if (this.settings.expandrowkeys[0] != item.id) {
this.$refs.multipleTable.toggleRowExpansion(item, false)
}else{
this.$refs.multipleTable.toggleRowExpansion(item)
}
})
}
},
methods: {
handleClick(type, e) {
console.log(e);
if (type == "select") {
this.$emit("select", e);
} else if (type == "pageSize") {
//一页多少条
this.$emit("pageSize", e);
} else {
//第几页
this.$emit("currentPage", e);
}
},
handleCurrentChange(val) {
this.$emit("currentChange", val);
},
// handleCellclick(row, column, cell, event) {//下面函数可包含参数
handleCellclick() {
//切换选中状态
// this.$refs.multipleTable.toggleRowSelection(row);
},
handleSelect(selection, row) {
//勾选
this.$emit("handleSelect", selection);
},
handleSelectall(selection) {
//全选
this.$emit("handleSelectall", selection);
},
},
};
</script>
<style scoped>
//关闭原生组件展开行按钮
.el-table .el-table__expand-icon {
display: none;
}
//展开行样式单独设置
.el-table__row--level-1{
background-color:#F0EDFF;
}
//取消点击行配置
.el-table__body tr.current-row>td {
background-color: #fff !important;
}
</style>
复制代码2，组件引用
//引入组件
import DspTable from "./../../../components/table.vue";
//组件声明
components: { DspTable },
//页面引用
<template>
<div>
<dsp-table
:data="tableData"
:header="dailyHeader"
:settings="tableSettings"
@currentPage="currentPage"
@pageSize="pageSize"
>
//自定义展示列插槽
<template slot="clickPV">
<el-table-column prop="clickPV" label="点击量" width='150'>
<template slot-scope="scope" >
<div class="det-msg">{{ scope.row["clickTips"] }}</div>
</template>
</el-table-column>
</template>
//自定义操作列插槽
<template slot="action">
<el-table-column
label="操作"
align="right"
width="120px"
fixed="right"
>
<template slot-scope="scope">
<el-button
//一级表有按钮，二级表没有按钮
v-if="scope.row['children']"
type="text"
//展开行操作
@click="handleshowtable(scope.row['id'])"
>{{ scope.row["click"] ? "收起计划" : "查看计划" }}</el-button>
</template>
</el-table-column>
</template>
</dsp-table>
</div>
</template>
<script>
export default {
components: { DspTable },
data() {
return {
tableData: { list: [] },
tableSettings: {
isPagination: true,
isLoading: true,
total: 0,
expandrowkeys: [],
},
};
},
created() {},
mounted() {},
watch: {},
computed: {},
methods: {
handleshowtable(id) {
if (this.tableSettings.expandrowkeys[0] == id) {
this.tableSettings.expandrowkeys = [];
this.tableData.list.map((item) => {
if (item.id == id) {
item.click = false;
}
});
} else {
this.tableSettings.expandrowkeys = [id + ""];
this.tableData.list.map((item) => {
if (item.id == id) {
item.click = true;
} else {
item.click = false;
}
});
}
},
currentPage(page) {
this.obj.pageNum = page;
this.inittable();
},
pageSize(size) {
this.obj.pageNum = "1";
this.obj.pageSize = size;
this.inittable();
},
};
</script>
复制代码