//夫组件应用
:tablelist="tablelist" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange" @handleoperationClick="handleoperationClick" >
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: {} }
]
}
//子组件
:data="tableDatas" border :key="tableKey" style="width: 100%" @selection-change="handleSelectionChange" > :align="val.align" :width="val.width?val.width:'auto'" :prop="val.date" :label="val.title" > label="操作" align="center" v-if="operations.length>0" width="240" fixed="right" > :size="val.size" :type="val.type" @click="handleClick(scope.$index, scope.row,val.label)" >{{val.label}} 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" />
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;
}
}
}
//有待优化，请各位看官提出宝贵意见，积极采纳