vue element 自己封装table
发布网友
发布时间：2022-12-27 09:12
共1个回答
热心网友
时间：2023-07-16 20:25
<div>
<Public-Table
:tablelist="tablelist"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@handleSelectionChange="handleSelectionChange"
@handleoperationClick="handleoperationClick"
></Public-Table>
</div>
tablelist: {
tablePage: true, //是否开启分页
currentPage: 1, //默认页数
pageSize: 10, //默认条数
total: 1, //默认总数
type: "index", //状态
tableData: [], //数据
tabletitle: [
//表头
{
date: "clientid",
title: "客户端id",
align: "center",
width: "200",
render: (h, params) => {
return h(
"el-button",
{
props: {
type: "text"
},
on: {
click: () => {
this.DetailsList = params.row;
this.Detailsstate = true;
}
}
},
params.row.clientid
);
}
},
{
date: "username",
title: "用户名",
align: "center",
width: "180"
},
{
date: "ip_address",
title: "IP地址",
align: "center",
width: "200"
},
{
date: "port",
title: "端口",
align: "center",
width: "160"
},
{
date: "clean_start",
title: "清除会话",
align: "center",
width: "160"
},
{
date: "proto_ver",
title: "协议版本",
align: "center",
width: "140"
},
{
date: "keepalive",
title: "心跳(秒)",
align: "center",
width: "140"
},
{
date: "connected_at",
title: "连接时间",
align: "center",
width: "180"
}
],
operation: [
{ label: "详情", size: "mini", type: "primary", value: {} },
{ label: "订阅", size: "mini", type: "primary", value: {} },
{ label: "踢除", size: "mini", type: "danger", value: {} }
]
}
//子组件
<div>
<el-table
:data="tableDatas"
border
:key="tableKey"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column :type="tabletype" align="center" label="序号" width="50" />
<template v-for="(val,i) in tabletitles">
<!-- <el-table-column
:align="val.align"
:width="val.width?val.width:'auto'"
:prop="val.date"
:label="val.title"
></el-table-column>-->
<el-table-column
:align="val.align"
:width="val.width?val.width:'auto'"
:prop="val.date"
:label="val.title"
>
<template slot-scope="scope">
<ex-slot v-if="val.render" :render="val.render" :row="scope.row" :index="scope.$index"></ex-slot>
<span v-else>{{ scope.row[val.date] || '' }}</span>
</template>
</el-table-column>
</template>
<el-table-column
label="操作"
align="center"
v-if="operations.length>0"
width="240"
fixed="right"
>
<template slot-scope="scope">
<template v-for="val in operations">
<el-button
:size="val.size"
:type="val.type"
@click="handleClick(scope.$index, scope.row,val.label)"
>{{val.label}}</el-button>
</template>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
v-if="tablePage"
style="margin-top: 10px"
:current-page="currentPage"
:page-sizes="[2,10, 20, 30, 40, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
var exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, data) => {
const params = {
row: data.props.row,
index: data.props.index
};
if (data.props.column) params.column = data.props.column;
return data.props.render(h, params);
}
};
export default {
components: {
exSlot
},
props: {
tablelist: Object
},
data() {
return {
tableKey: 0,
tablePage: this.tablelist.tablePage || false,
operations: this.tablelist.operation || [], //操作方法
tabletype: this.tablelist.type || "index", //渲染状态
tableDatas: this.tablelist.tableData || [], //数据
tabletitles: this.tablelist.tabletitle || [], //表头
currentPage: this.tablelist.currentPage || 1, //初始页
pageSize: this.tablelist.pageSize || 10, //每页的数据
total: this.tablelist.total || 0 //总条数
};
},
created() {
console.log("table");
},
computed: {},
methods: {
//pageSize 改变时会触发
handleSizeChange(val) {
this.$emit("handleSizeChange", val);
},
//currentPage 改变时会触发
handleCurrentChange(val) {
this.$emit("handleCurrentChange", val);
},
//多选框回调
handleSelectionChange(selection) {
// console.log(selection);
this.$emit("handleSelectionChange", selection);
},
//操作返回
handleClick(index, row, label) {
this.$emit("handleoperationClick", { index, row, label });
}
},
watch: {
tablelist: {
//监听传值数据变化更新视图
deep: true, //深度监听设置为 true
handler: function(newV, oldV) {
this.tableDatas = newV.tableData;
this.total = newV.total;
}
}
}
//有待优化，请各位看官提出宝贵意见，积极采纳
