AVUE动态生成表头和列
效果图后台返回数据格式:{"total":5,"per_page":10,"current_page":1,"last_page":1,"data":{"cols":[{"prop":"9999999","label":"商户"...
·
效果图
后台返回数据格式:
{
"total":5,
"per_page":10,
"current_page":1,
"last_page":1,
"data":{
"cols":[
{
"prop":"9999999",
"label":"商户"
},
{
"prop":"0",
"label":"市场"
},
{
"prop":"786",
"label":"测试1"
},
{
"prop":"787",
"label":"测试2"
}
],
"table_data":[
{
"0":"8.00",
"786":"8.00",
"787":"8.00",
"9999999":"香米"
},
{
"0":"8.00",
"786":"6.00",
"787":"12.00",
"9999999":"花椰菜"
},
{
"0":"9.00",
"786":"9.00",
"787":"无",
"9999999":"黑木耳"
},
{
"0":"12.00",
"786":"无",
"787":"12.00",
"9999999":"大鸭脖"
},
{
"0":"8.00",
"786":"8.00",
"787":"8.00",
"9999999":"粳糙米"
}
]
}
}
vue文件
<template>
<div class="avue-table">
<avue-crud
:data="tableData"
:page="page"
:option="tableOption"
v-model="tableParams"
:table-loading="tableLoading"
ref="crud"
@size-change="sizeChange"
@current-change="currentChange"
@search-change="searchChange"
></avue-crud>
</div>
</template>
<script>
/**
* @description 菜价对比
* @author yxf
* @date 2020-03-23
* @version 1.0.0
* @lastModifiedBy yxf
* @lastModifiedTime 2020-03-23
*/
import Search from "@/components/common/Search";
var DIC = {
SCOPE: []
};
export default {
name: "yxf",
components: { Search },
data() {
return {
visibleSearch: false,
searchValue: "",
page: {
pageSize: 10,
currentPage: 1,
total: 0
},
tableLoading: false,
tableParams: {
start_date: "",
end_date: "",
dateRange: []
},
tableData: [],
weekDate: [],
searchColumn: [],
constData: []
};
},
computed: {
tableOption() {
return {
addBtn: false,
addBtnText: "增加",
align: "center",
border: true,
columnBtn: false, //列显隐按钮
delBtn: false, //自带删除按钮
dialogWidth: 800, //弹出框宽度
dialogDrag: true, //表单拖动
editBtn: false, //自带编辑按钮
header: true, //表头操作按钮
labelWidth: 100,
menuAlign: "center",
menu: false, //行自带按钮
menuWidth: 150, //操作栏宽度
page: true, //分页
refreshBtn: false, //刷新按钮
selection: false, //是否多选
title: "", //表格标题
selectable: (row, index) => {
return row.show_btn === 0; //selectable函数决定该行是否可以勾选,返回符合条件的列
},
column: [
{
label: "经营范围",
prop: "scope",
type: "select",
dicData: DIC.SCOPE,
search: true,
searchValue: "水果",
hide: true,
searchLabelWidth: 100,
change: ({ value, column }) => {
this.constData[0].searchValue = value;
},
searchRules: [
{
required: true,
message: "请选经营范围",
trigger: "change"
}
]
},
{
label: "日期范围",
prop: "dateRange",
type: "date",
startPlaceholder: "开始日期",
endPlaceholder: "结束日期",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
searchSpan: 12,
searchRange: true,
search: true,
hide: true,
searchValue: this.weekDate,
searchLabelWidth: 100,
change: ({ value, column }) => {
this.constData[1].searchValue = value;
},
searchRules: [
{
required: true,
message: "请选择日期",
trigger: "change"
}
]
}
]
};
}
},
watch: {},
created() {
this.weekDate = this.getWeekDate();
DIC.SCOPE = localStorage
.getItem("经营范围")
.split(",")
.map(item => {
return {
label: item,
value: item
};
});
this.getData();
this.constData = this.deepClone(this.tableOption.column);
},
beforeMount() {},
mounted() {},
methods: {
searchChange(params, done) {
this.getData();
done();
},
getData() {
this.tableLoading = true;
let resData = [];
let params = {};
this.$nextTick(() => {
params = this.deepClone(this.$refs.crud.searchForm);
params.start_date = params.dateRange[0];
params.end_date = params.dateRange[1];
this.$axios({
method: "POST",
url: "/admin/hadoop/price_compare/showlist",
data: {
page: this.page.currentPage,
num: this.page.pageSize,
vague: this.searchValue,
...params
}
})
.then(res => {
this.tableLoading = false;
this.visibleSearch = false;
if (res.data.status == 0) {
this.$message.error(res.data.reason);
this.tableOption.column = this.constData;
this.page.total = 0;
} else {
resData = res.data.data.cols;
this.tableOption.column = [...resData, ...this.constData];
this.tableData = res.data.data.table_data;
this.page.total = res.data.total;
}
})
.catch(err => {});
});
},
sizeChange(val) {
this.page.currentPage = 1;
this.page.pageSize = val;
this.getData();
},
currentChange(val) {
this.page.currentPage = val;
this.getData();
}
}
};
</script>
<style scoped>
</style>>
<style>
.avue-table {
width: 100%;
font-size: 12px;
padding: 15px 30px 30px 30px;
background: #fff;
box-sizing: border-box;
}
.avue-upload .el-upload--text {
width: auto;
height: auto;
border: none;
}
.uploadPdf .avue-group__item {
padding: 0;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)