avue-crud implementation example of multi-level complex dynamic header

avue-crud implementation example of multi-level complex dynamic header

Avue.js is a secondary encapsulation based on the existing element-ui library, which simplifies some tedious operations. The core concept is data-driven view. The main component library is for table and form scenarios. At the same time, it derives more commonly used components for enterprises to achieve a highly reusable, easy to maintain and expand framework. At the same time, it has built-in rich data display components to make development easier.

Preface

In the actual development process, multi-level complex dynamic headers are required, and the content in the headers is dynamically filled. The following is the header style provided by the avuejs official website, so the data returned by my background needs to be spliced ​​in the json format in avue-crud.

insert image description here

In actual development, it needs to be spliced ​​into, column format.

column: [{
            label: 'Name',
            prop: 'name',
            width:140,
          }, {
            label: 'Gender 1',
            prop: 'sex',
          },
          {
            label: 'Custom icon',
            prop: 'icon',
            type: "icon",
            iconList: [{
              label: 'Basic chart',
              list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
            }]
          }, {
            label: 'Complex header',
            children: [{
              label: 'Information',
              children: [{
                label: 'age',
                prop: 'age'
              }, {
                label: 'Mobile phone number',
                prop: 'phone',
              }]
            }, {
              label: 'region',
              prop: 'address',
              type: 'select',
              props: {
                  label: 'name',
                  value: 'code'
              },
              dicUrl:'https://cli.avuejs.com/api/area/getProvince'
            }]
          }, {
            label: 'test',
            prop: 'test',
          },
          {
            label: 'Mobile phone information 1',
            prop: 'phone1'
          }],
        },
        data: [{
          name: 'Zhang San',
          age: 14,
          address: '110000',
          phone1: '17547400800',
          phone: '17547400800',
          icon: 'el-icon-time',
          test: 1,
          sex: 'male'
        }, {
          name: 'Wang Wu',
          age: 10,
          address: '120000',
          test: 1,
          sex: 'female',
          icon: 'el-icon-star-on',
          phone1: '17547400800',
          phone: '17547400800'
        }]

Background data splicing

@GetMapping("/getTableHeader")
	public R getTableHeaderJson(){
		Map<String,Object> map = new HashMap<>();
		StringBuilder sb = new StringBuilder();
		sb.append("{label: 'Process',children: [");
		List<FactoryProcess> processList = factoryProcessService.list();
		for (int i = 0; i < processList.size(); i++) {
			String pid = processList.get(i).getProcessId();
			sb.append("{label:'" + processList.get(i).getProcessName() + "',prop:'" + pid + "',");
			sb.append("children:[{label: 'Unit price',prop: 'price" + pid + "'}, " +
				"{label: 'Total', prop: 'sum" + pid + "'},{label: 'Completed quantity', prop: 'completeNum" + pid + "'}, " +
				"{label: 'Qualification inspection qualified number', prop: 'qualifiedNum" + pid + "'}," +
				" {label: 'Number of unqualified quality inspection', prop: 'unqualifiedNum" + pid + "'}, " +
				"{label: 'Scrap quantity',prop: 'scrapNum" + pid + "'}]").append("},");
		};
		sb.append("]}");

		map.put("cols",sb.toString());

		return R.data(map);
	}

Front-end data display

Load the header information display in the create function

// Load created(){
      this.getHeaderList();
 },
//The information displayed on the loading page in method methods: {
      getHeaderList(){
        getHeaderFun().then(res => {
          this.option.column.push(
                 {
                   label: "Product Name",
                   prop: "productName",
                   color:'#eef1f6'
                 },
                 {
                   label: "Product Code",
                   prop: "productCode",
                 },
                 {
                   label: "Material",
                   prop: "productMaterialStr",
                 },
                 {
                   label: "quantity",
                   prop: "sumNum",
                 },
                 {
                   label: "Number of outsourcing",
                   prop: "outNum",
                 },
                 {
                   label: "Outsourcing completion amount",
                   prop: "outCompleteNum"
                 },
                 {
                   label: "Total completed amount",
                   prop: "totalCompleteNum"
                 }
          )
          // Get the background splicing information let objs = eval("("+res.data.data.cols+")");
          this.option.column.push(objs);
          this.onLoad(this.page);
        })
      }, 
 }

Loading data from a table

// The display of page data needs to correspond to the prop attribute of the background request onLoad(page, params = {}) {
        this.loading = true;
        findProjectFormList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          //this.data = data.records;

          let records = data.records;
          let dataList = [];
          let processList = this.option.column[7].children;
          for(let i = 0; i < records.length; i++ ) {
            let obj = {
              'productName' : records[i].productName,
              'productCode' : records[i].productCode,
              'productMaterialStr' : records[i].productMaterialStr,
              'sumNum' : records[i].sumNum,
              'outNum' : records[i].outNum,
              'outCompleteNum' : records[i].outCompleteNum,
              'totalCompleteNum': records[i].totalCompleteNum,
            }
            let processNumList = records[i].processNumList;
            for(let j = 0; j < processNumList.length; j++) {
              for (let k = 0; k < processList.length; k++) {
                if (processList[k].prop === processNumList[j].processCode) {
                // $set assigns the value to the corresponding property prop this.$set(obj, 'price'+processNumList[j].processCode, processNumList[j].processPrice);
                  this.$set(obj, 'sum'+processNumList[j].processCode, processNumList[j].processTotal);
                  this.$set(obj, 'completeNum'+processNumList[j].processCode, processNumList[j].completeNum);
                  this.$set(obj, 'qualifiedNum'+processNumList[j].processCode, processNumList[j].qualifiedNum);
                  this.$set(obj, 'unqualifiedNum'+processNumList[j].processCode, processNumList[j].unqualifiedNum);
                  this.$set(obj, 'scrapNum'+processNumList[j].processCode, processNumList[j].scrapNum);
                  this.$set(obj, 'shift'+processNumList[j].processCode, processNumList[j].shiftName);
                }
              }
            }
            dataList.push(obj);
          }
          this.data = dataList;

          this.loading = false;
          this.selectionClear();

        })
      },

Page effect display

insert image description here

insert image description here

This is the end of this article about the implementation example of avue-crud multi-level complex dynamic header. For more related avue-crud multi-level complex dynamic header content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue+Element ui sets dynamic header operation according to the background return data
  • Dynamic rendering of table in vue element (dynamic table header)

<<:  A complete guide to some uncommon but useful CSS attribute operations

>>:  Detailed explanation of global parameter persistence in MySQL 8 new features

Recommend

CentOS uses expect to remotely execute scripts and commands in batches

Sometimes we may need to operate servers in batch...

Practical record of Vue3 combined with TypeScript project development

Table of contents Overview 1. Compositon API 1. W...

Make a nice flip login and registration interface based on html+css

Make a nice flip login and registration interface...

Install Mininet from source code on Ubuntu 16.04

Mininet Mininet is a lightweight software defined...

Calendar effect based on jQuery

This article example shares the specific code of ...

HTML Basic Notes (Recommended)

1. Basic structure of web page: XML/HTML CodeCopy...

Specific use of MySQL global locks and table-level locks

Table of contents Preface Global Lock Table lock ...

How to build a deep learning environment running Python in Docker container

Check virtualization in Task Manager, if it is en...

How to install Postgres 12 + pgadmin in local Docker (support Apple M1)

Table of contents introduce Support Intel CPU Sup...

Tips for using DIV container fixed height in IE6 and IE7

There are many differences between IE6 and IE7 in ...

HTML web page creation tutorial Use iframe tags carefully

Using iframes can easily call pages from other we...

How to solve the error "ERROR 1045 (28000)" when logging in to MySQL

Today, I logged into the server and prepared to m...