element vue dynamically displays hidden columns

When building pages using Vue.js and Element UI, you often need to use tables to display data. Sometimes it is necessary to dynamically show or hide certain columns so that users can customize the information they need according to their needs. Element UI provides a convenient, easy-to-use and powerful table component. This article will focus on how to dynamically show or hide columns in Element UI tables.

1. Basic idea
The table component in Element UI provides column objects, and each column object can set the properties of a column. Therefore, if you want to dynamically show or hide a column, you can add a v-if control attribute to the column object.

2. Example Analysis
Here we take the el-table component in Element UI as an example to demonstrate how to dynamically display or hide columns through Vue.js. Suppose we have a set of data as shown below. The "Encoding" and "Status" columns are columns that need to be displayed or hidden dynamically.

1. First, add the following code to the table template:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      v-if="showCode"
      prop="code"
      label="编码">
    </el-table-column>
    <el-table-column
      v-if="showStatus"
      prop="status"
      label="状态">
    </el-table-column>
  </el-table>
</template>

2. Add the data option to the script tag, and add two data attributes, showCode and showStatus. The initial values ​​are all true.

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, code: '001', status: '正常' },
        { name: '李四', age: 23, code: '002', status: '异常' },
        { name: '王五', age: 30, code: '003', status: '正常' },
        { name: '赵六', age: 40, code: '004', status: '异常' }
      ],
      showCode: true,
      showStatus: true
    }
  }
}
</script>

3. Finally, change the values ​​of showCode and showStatus in the click event to dynamically show or hide columns. For example:

<el-button @click="showCode = !showCode">显示/隐藏编码</el-button>
<el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>

After clicking the "Show/Hide Encoding" button, you can see the effect as shown below. When the value of showCode is true, the column "Encoding" is displayed; when the value of showCode is false, the column "Encoding" is hidden.

4. Summary
This article introduces how to dynamically display or hide columns in the Element UI table component. We only need to add a v-if control attribute to the column object and change its value in the relevant operation to easily implement this function. This method allows users to freely select the information they need according to their needs, improving the flexibility and customizability of the page.

The above is the detailed content of element vue dynamically displays hidden columns. For more information, please follow other related articles on the PHP Chinese website!