AVUE动态生成表头和列

效果图

后台返回数据格式:

{
    "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>