Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Let’s start with a requirement

Table can be sorted 3. Table column width can be dragged 4. Table column and table header 5 are fixed. 6. Table columns can be hidden or displayed. 7. Table Settings need to be saved in real timeCopy the code

 

solution

The [1, 2, 3, 4] element-UI table component is supported natively

[5] The column order can be adjusted by changing the render order of the el-table-column

[6] It can be realized by controlling the display and hiding of el-table-column

[7] Save each change to the local localStorage

 

Table component address:Element. The eleme. IO / # / useful – CN/com…

 

The code:

The core is that you need to render the el-table-column in a loop

< the template > section

<! -- Column Settings button -->
<el-dropdown trigger="click">
  <el-button icon="el-icon-s-operation" size="mini">Column setup</el-button>
  <el-dropdown-menu slot="dropdown">
    <span class="title">Column setup</span>
    <el-tree draggable :data="columns" :props="defaultProps" :allow-drop="allowDrop" @node-drop="handleDrop">
      <span class="tree-table-setting" slot-scope="{ node, data }">
        <el-switch @change="saveTableColumns" v-model="data.show"> </el-switch>
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </el-dropdown-menu>
</el-dropdown>


<! - form - >
<div>
  <el-table
    :key="tableKey"
    :data="tableData"
    :height="tableHeight"
    :row-style="{ height: '40px' }"
    :cell-style="{ borderRight: 'none' }"
    :header-cell-style="{ height: '40px', padding: 0, background: '#f6f8fa', color: '#333' }"
    @row-click="handelTableClick"
    @selection-change="handleSelectionChange"
    @header-dragend="surverWidth"
    border
    size="mini"
    tooltip-effect="dark"
    highlight-current-row
  >
    <el-table-column align="center" type="selection"> </el-table-column>
    <template v-for="item in columns">
      <el-table-column
        v-if="item.show"
        show-overflow-tooltip
        :prop="item.prop"
        :sortable="item.sortable"
        :label="item.label"
        :width="item.width"
        :key="item.prop"
        :resizable="item.resizable"
      >
        <template slot-scope="scope">
          <span v-if="item.prop === 'clue_type'">{{ scope.row[item.prop] | clueType }}</span>
          <span v-else-if="item.prop === 'clue_source'">{{ scope.row[item.prop] | clueSource }}</span>
          <span v-else-if="item.prop === 'contact_type'">{{ scope.row[item.prop] | commonType }}</span>
          <span v-else-if="item.prop === 'company_name'" class="link">{{ scope.row[item.prop] }}</span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </template>
    <! -- Fixed column -->
    <el-table-column fixed="right" label="Attention" width="56">
      <template slot-scope="scope">
        <el-button
          style="height: 10px; padding:0; margin:0;"
          type="text"
          @click.native.stop="clueTableRowClick(scope.row, 'collect')"
          size="mini"
        >
          <img v-if="scope.row.collect === 1" style="width:16px" src="@/assets/star1.png" />
          <img v-else style="width:16px" src="@/assets/star0.png" />
        </el-button>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="Edit" width="56">
      <template slot-scope="scope">
        <el-button
          style="height: 10px; padding:0; margin:0;"
          type="text"
          @click.native.stop="clueTableRowClick(scope.row, 'edit')"
          size="mini"
        >
          <img style="width:16px" src="@/assets/edit.png" />
        </el-button>
      </template>
    </el-table-column>
    <el-table-column> </el-table-column>
  </el-table>
</div>
Copy the code

Matters needing attention

1. To control the display and hiding of an el-table-column, use v-show instead of v-if.

2. Some columns need to use filters. Here I use if to judge.

3. The table may not be refreshed in real time due to the virtual Dom algorithm, so you need to add a key value to the table.

4. You can drag the column to use the Tree component.

5. Assign a value to tableHight after the table data is obtained each time because the column and table header need to be fixed.

const winHeight = document.body.clientHeight
// Window size - table top height
this.tableHeight = winHeight - 260
Copy the code

6. Since row is bound with click event, we need to add. Native modifier to Button in row to prevent event bubbling and add.

 

< script > section

export default {
  data() {
    / / form key
    tableKey: 1.// Table data
    tableData: [].// Default table heightTableHeight:600.// Table display item configurationThe columns: [{prop: 'name'.// The name of the field corresponding to the column contents
        label: 'name'.// Display the title
        width: 66.// Width of the corresponding column
        resizable: true.// Whether the width of the corresponding column can be changed by dragging (need to set the border property to true on the el-table)
        show: true.// Show and hide
        sortable: false // Whether the corresponding column can be sorted
      },
      {
        prop: 'clue_type'.label: 'Cue type'.width: 78.resizable: true.show: true.sortable: false
      },
      / /... Omitted field].// Tree configuration in column Settings
    defaultProps: {
      children: 'children'.label: 'label'}},mounted(){
    this.init()
  },
  methods: {
    init() {
      // Check whether there is table configuration data locally. Load: ignore
      // Get table data
      // Reset the table height
    },
    allowDrop(draggingNode, dropNode, type) {
      // Only Tree nodes can be dragged up or down
      returntype ! = ='inner'
    },
    // Tree updates the table while dragging
    handleDrop() {
      this.tableKey++
      // Save the table configuration
      this.saveTableColumns()
    },
    // Reset table column Settings
    resetTable() {
      / /... ignore
    },
    // Show hide toggle && save table configuration
    saveTableColumns() {
      // setStorage encapsulates localStorage
      setStorage('clueTable'.this.columns)
    },
    // Select the table row
    handelTableClick(row) {
      / /... Omit business logic},// table multiple operations
    handleSelectionChange(val) {
      / /... Omit business logic},// Table header drag event
    surverWidth(newWidth, oldWidth, column, event) {
      this.columns = this.columns.map(v= > {
        if (v.prop === column.property) v.width = newWidth
        return v
      })
      this.saveTableColumns()
    },
    // Focus and edit operations
    clueTableRowClick(val, type) {
      / /... Omit business logic}}}Copy the code

 

This is a simple implementation of the requirement.

END

“Welcome to the discussion in the comments section. The nuggets will be giving away 100 nuggets in the comments section after the diggnation project. See the event article for details.”