2月25日-门票管理-树形表格
<template>
<div>
<el-table :data="list" row-key="Id" default-expand-all :row-class-name="getClassName">
<el-table-column label="名称">
<template v-slot="scope">
<el-image
:src="scope.row.Src"
style="width:60px;height:60px;vertical-align: middle;"
fit="contain"
:preview-src-list="[scope.row.Src]"
></el-image>
{{scope.row.Id>0?scope.row.Title:scope.row.Name}}
</template>
</el-table-column>
<el-table-column label="单价" width="160"></el-table-column>
<el-table-column label="库存" width="100"></el-table-column>
<el-table-column label="商户信息" width="150">
<template v-slot="scope">
<el-popover placement="left" title="店铺信息" width="300" trigger="hover">
<div>
电话:{{scope.row.ShopPhone}}
<br />
地址:{{scope.row.ShopAddress}}
</div>
<div slot="reference">
<el-tag type="success" v-if="scope.row.ShopName">{{scope.row.ShopName}}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="状态" width="100"></el-table-column>
<el-table-column label="排序号" width="100"></el-table-column>
<el-table-column label="操作" width="160"></el-table-column>
</el-table>
<el-pagination
@size-change="loadData()"
@current-change="loadData()"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 40, 80, 100]"
:page-size.sync="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum"
background
></el-pagination>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
totalNum: 0,
keyword: "",
list: []
};
},
mounted() {
this.loadData();
},
methods: {
getClassName(scope) {
if (scope.row.Id < 0) {
return "cat";
} else {
return "";
}
},
loadData(keyword) {
if (keyword != undefined) {
this.keyword = keyword;
this.currentPage = 1;
}
axios
.get("/api/ticket/get", {
params: {
keyword: this.keyword,
page: this.currentPage,
size: this.pageSize
}
})
.then(res => {
this.list = res.data.rows;
this.totalNum = res.data.total;
});
}
}
};
</script>
<style >
.cat td,
.cat th {
background: #f8f8f8 !important;
}
</style>