preface

In the development of backstage management system, the form is often used in data display. However, sometimes the table displays too many columns to fit on one screen and you need to manually scroll the scroll bar to see it.

In fact, in the actual use of the system, different users focus on different columns, and it is not necessary to show all the columns. Therefore, you can develop a function that can configure the columns that the table needs to display, so that only the columns that you care about are displayed and the columns that you don’t care about are not displayed on the page, improving the user experience.

demand

Requires the ability to dynamically configure the columns that need to be displayed in the table, showing all columns by default.

Train of thought

  1. Define column data indata, and then dynamically bind column data to the template
  2. Provides a set of check boxes for setting column display. By default, all columns are selected, that is, all columns are displayed by default
  3. When a column is checked or unchecked, the dynamically bound column data in the template is updated so that the page displays only the columns that need to be displayed

The development of

state

Firstly, several states can be determined according to the train of thought:

  • tableDataTabular data
  • tableColumnsThe unique source of all column data in the table
  • bindTableColumnsThe column data that is bound to the template, that is, the column data that needs to be presented
  • checkedTableColumnsThe column data selected in the check box

implementation

Then start implementing:

  1. First, write a basic table. (Refer to ELEMENT-UI Basic Table)

    <template> <el-table :data="tableData" border> <el-table-column prop="date" label=" date" > </el-table-column> <el-table-column prop="name" label=" name" > </el-table-column prop="address" label=" address" > <el-table-column prop="address" label=" address" > </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-02", address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai ",}, {date: "2016-05-04", address: "Lane 1517, Jinshajiang Road, Putuo District, Shanghai ",}, {date: "2016-05-01", name:" Wang Xiaohu ", address: "Lane 1519, Jinshajiang Road, Putuo District, Shanghai ",}],}; }}; </script>

  2. Then, optimize the template.

    Define the table column data in data, and traverse the column data with the v-for directive in the template.

    <template> <el-table :data="tableData" border> <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" > </el-table-column> </el-table> </template> <script> export default { data() {return {tableColumns: [{prop: "date", label: "date",}, {prop: "name", label: "name",}, {prop: "address", label: "date",}, {prop: "address", label: "date", "Address ",},],}; }}; </script>

  3. Second, we optimize the column data tableColumns by adding a show attribute to each column to indicate the display and hiding of the column. Default is true, which means that all columns are displayed by default.

    <script bb0 export default {data() {return {tableColumns: [{prop: "date", label: "date", show: true}, {prop: "date", label: "date", show: true}, }, {prop: "address", label: "address", show: true},],}; }}; </script>

  4. Third, add a computed attribute called bindTableColumns to filter out the columns that need to be displayed and bind them to the template.

    Thus, any subsequent column configuration will only operate on the show and hide properties of the column in the TableColumns, bindTableColumns will be automatically updated, and the page will be automatically re-rendered.

    <template> <el-table :data="tableData" border> <el-table-column v-for="column in bindTableColumns" :key="column.prop" :prop="column.prop" :label="column.label" ></el-table-column> </el-table> </template> <script> export default { computed: { bindTableColumns() { return this.tableColumns.filter((column) => column.show); }}}; </script>

  5. Then, implement the table column configuration template, which is used to set up the display and hide of columns.

    A set of check boxes is used to select all configurable table columns by default.

    <template> <div> <label> > Please select the column you want to display in the table: </label> <el-checkbox-group v-model="checkedTableColumns"> <el-checkbox v-for="column in columns" :key="column.prop" :label="column.prop" >{{ column.label }}</el-checkbox > </el-checkbox-group> </div> </template> <script> export default {computed: {/* The advantage of using getters and setters here is that you don't have to manually listen for the checked events in the checkbox */ CheckedTableSolumns: {the get () {/ / return the selected column names return enclosing bindTableColumns. The map (column = > column. The prop); }, the set (checked) {/ / set the table column show and hide this. TableColumns. ForEach (column = > {/ / if selected, If (checked. Includes (column)) {column. Show = true; } else {// If unchecked, set the column to hide Column. Show = false; } }) } } } } </script>

Online example:

CodePen: ELEMENT-UI TABLE component sets the display and hiding of the display columns