Implementation process of dynamic rendering of el-table in ElementUI

introduction

Before you start, let’s briefly introduce ElementUI and el-table. ElementUI is a set of component libraries based on , providing rich components and styles , aiming to help developers quickly build high-quality user interfaces . el-table is a table component in ElementUI, which has the advantages of high performance and high flexibility, and is suitable for various complex data display scenarios.

The charm of dynamic rendering

The so-called dynamic rendering is to update the content and structure of the table in real time according to the changes in data. This means that you can adjust the number of columns, column names, data sources, etc. of the table at any time according to actual needs without re-rendering the entire table. Such flexibility is particularly important when processing complex data.

Preparation

Before we officially start, we need to make sure that we have installed . If you haven't installed it, you can follow these steps to install it:

Install

You can install it via npm or yarn:

npm install vue
# oryarn add vue

Install ElementUI

Similarly, you can install ElementUI via npm or yarn:

npm install element-ui
# oryarn add element-ui

Then, introduce ElementUI into your project:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/';

(ElementUI);

Basic use

Before understanding dynamic rendering, let's take a look at oneel-tableBasic usage examples:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="date" width="180"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="address" label="address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-02',
          name: 'Jerry',
          address: 'No. 189, Grove St, Los Angeles'
        }
      ]
    };
  }
};
</script>

In this example, we define atableDataData source and useel-tableandel-table-columnComponents to display data. Eachel-table-columnA column corresponding to the table, passpropProperties specify fields in the data source.

Dynamic rendering implementation

Now, let's explore how to implement dynamic rendering el-table. The key to implementing dynamic rendering is to dynamically generate columns and rows of tables based on data. We can dynamically generate the el-table-column component by using the v-for directive in the template.

Dynamically generate columns

Suppose we have a columns array that stores the column information of the table, and each element contains the prop and label of the column:

data() {
  return {
    tableData: [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-02',
        name: 'Jerry',
        address: 'No. 189, Grove St, Los Angeles'
      }
    ],
    columns: [
      { prop: 'date', label: 'date' },
      { prop: 'name', label: 'Name' },
      { prop: 'address', label: 'address' }
    ]
  };
}

Next, we use it in the templatev-forDynamically generated instructionsel-table-columnComponents:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key=""
        :prop=""
        :label="">
      </el-table-column>
    </el-table>
  </div>
</template>

In this way, we have achieved thecolumnsArray dynamically generates columns of tables. If you need to add or delete columns, just modifycolumnsJust array.

Dynamically generate data

In practical applications, data sources are often dynamically changing. We can update by calling the API or listening to user actions.tableData. Here is a simple example:

<template>
  <div>
    <el-button @click="fetchData">Get data</el-button>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key=""
        :prop=""
        :label="">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [
        { prop: 'date', label: 'date' },
        { prop: 'name', label: 'Name' },
        { prop: 'address', label: 'address' }
      ]
    };
  },
  methods: {
    fetchData() {
      // Simulate API calls      setTimeout(() => {
         = [
          {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          },
          {
            date: '2016-05-02',
            name: 'Jerry',
            address: 'No. 189, Grove St, Los Angeles'
          }
        ];
      }, 1000);
    }
  }
};
</script>

In this example, we add a button that is called when clicking the buttonfetchDataMethods, thus updatetableData. In this way, we can dynamically update table data according to actual needs.

More advanced dynamic rendering

The above examples have shown basic dynamic rendering techniques, but in practical applications we may need to deal with more complex scenarios. For example:

• Dynamic display of different columns according to user role
• Dynamically set column properties, such as width, alignment, sorting, etc.
• Dynamically render nested tables or custom column content

Below, we will discuss these advanced application scenarios one by one.

Dynamic display of columns according to user role

In some applications, different user roles need to see different table columns. We can achieve this requirement through conditional rendering:

data() {
  return {
    tableData: [
      // Data slight    ],
    columns: [
      { prop: 'date', label: 'date', roles: ['admin', 'user'] },
      { prop: 'name', label: 'Name', roles: ['admin'] },
      { prop: 'address', label: 'address', roles: ['user'] }
    ],
    userRole: 'user'
  };
}

In the template, we usev-ifDirectives dynamically render columns based on user roles:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key=""
        :prop=""
        :label=""
        v-if="(userRole)">
      </el-table-column>
    </el-table>
  </div>
</template>

In this way, we can dynamically display different table columns according to the user role.

Dynamically set column properties

In practical applications, we may need to dynamically set the properties of the column, such as width, alignment, sorting, etc. We cancolumnsDefine these properties in an array and then apply dynamically in the template:

data() {
  return {
    tableData: [
      // Data slight    ],
    columns: [
      { prop: 'date', label: 'date', width: 180, align: 'center', sortable: true },
      { prop: 'name', label: 'Name', width: 180, align: 'left', sortable: false },
      { prop: 'address', label: 'address', align: 'right' }
    ]
  };
}

In the template, we use property binding to apply these properties dynamically:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key=""
        :prop=""
        :label=""
        :width=""
        :align=""
        :sortable="">
      </el-table-column>
    </el-table>
  </div>
</template>

Dynamically render nested tables or custom column content

In some complex scenarios, we may need to nest other tables or custom column contents in the table. We can passscoped slotTo achieve this requirement:

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key=""
        :prop=""
        :label="">
        <template v-slot="scope">
          <!-- Customize column content -->
          <div v-if="">{{ customRender(, ) }}</div>
          <!-- Default column content -->
          <div v-else>{{ [] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // Data slight      ],
      columns: [
        { prop: 'date', label: 'date' },
        { prop: 'name', label: 'Name', custom: true },
        { prop: 'address', label: 'address' }
      ]
    };
  },
  methods: {
    customRender(row, prop) {
      // Custom rendering logic      return `${row[prop]} (custom)`;
    }
  }
};
</script>

In this example, we passv-slotSlots have customized column content. iffortrue, then callcustomRenderMethod renders custom content, otherwise the default content will be displayed.

Summarize

Through the introduction of this article, I believe you have a relatively comprehensive understanding of ElementUI's dynamic rendering el-table. From basic use to advanced applications, we explore various dynamic rendering techniques and implementation methods. Hopefully, these contents will help you more flexibly use the el-table component in real projects.

Whether it is data display, data entry, or data analysis, tables are always an indispensable part of front-end development. Through dynamic rendering technology, we can deal with various complex scenarios more flexibly and provide users with a better interactive experience. I hope you can give full play to these skills in actual projects and create high-quality form applications.

The above is the detailed content of the implementation process of ElementUI dynamic rendering el-table. For more information about ElementUI dynamic rendering el-table, please follow my other related articles!