preface

In the development of background management system, the form is often used to show the data. However, sometimes there are too many columns displayed in the table, and there will be no display on one screen, so you need to manually scroll the scroll bar to view the situation.

In fact, in the actual use of the system, different users pay attention to different columns, and it is not necessary to display all columns. Therefore, it is possible to develop a function that can configure the columns to be displayed in the table, 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, thus improving the user experience.

demand

Columns to be displayed in the table can be dynamically configured. By default, all columns are displayed.

Train of thought

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

The development of

state

First, according to the idea, several states can be determined:

  • tableDataTabular data
  • tableColumnsAll column data in the table, the only source of column data
  • bindTableColumnsColumn data bound to the template, that is, the column data that needs to be displayed
  • checkedTableColumnsSelect column data in the checkbox

implementation

Then start implementing:

  1. First, write a basic table. (Refer to the Element-UI basic table)

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

  2. Then, optimize the template.

    The column data tableColumns of the table is defined in data, and the column data is traversed by the V-for instruction in the template.

    <template> <el-table :data="tableData"> <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: "name",}, {prop: "address", label: },],}; }}; </script>Copy the code

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

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

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

    In this way, the subsequent configuration of the column will only operate on the tableColumns column show and hide property, bindTableColumns will automatically update, and the page will automatically re-render.

    <template> <el-table :data="tableData"> <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>Copy the code

  5. Then, the table column configuration template is implemented to set the display and hiding of columns.

    A set of check boxes is used here, and all table columns that can be configured are selected by default.

    <template> <div> <label> Please select the column that 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: {/* This uses getters and setters, so you don't have to manually listen for checkbox checks */ checkedTableColumns: {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 not selected, set column hide column.show = false; } }) } } } } </script>Copy the code

Online examples:

CodePen: Element-UI table component sets display and hide of display columns