Element-UI operations on the table

The recent project uses the Element-UI component library. As it is a background management system, we often need to operate tables and encounter some problems in editing styles. The official website provides a lot of API for table, which can be customized by ourselves, basically meeting product requirements, but there are no specific cases. Online information is also relatively brief, here is a simple arrangement of some common operations, if there is a similar function can do a reference.

For specific usage methods, please read the section of table on the official website carefully:

Element. The eleme. Cn / # / useful – cn/com…

Demo of this project has been uploaded to Github, welcome to download:

# Clone to local
git clone [email protected]:Hanxueqing/Element-table.git

# install dependencies
npm install

Enable local server localhost
npm run dev
Copy the code

Project address: github.com/Hanxueqing/…

Customize the contents of the column

Requirement: Add an action button in the last column of the table

Add action button via slot-scope=”scope”, this is the slot provided specially for us, easy to customize different content.

"Class =" HLJS "> <template slot-scope="scope"> <el-button size="mini" type="primary"> Edit </el-button> <el-button Size ="mini" type="danger"> delete </el-button> </template> </el-table-column>Copy the code

Scope.$index Gets the current row index

The added action button can use scope.$index to retrieve the subscript of the current row

<el-table-column label="Operation" width="160">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)"</el-button> </template> </el-table-column>Copy the code

You can operate on a specified row by subscript

Scope. row gets the current property value

The scope.row. Property name is used to obtain the property value for the current row

<el-table-column label="Operation" width="160">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain @click = "showName(scope.row.name)"</el-button> </template> </el-table-column>Copy the code

Click the button to get the name property value for the current row

Special attribute values can be styled using scope.row. Attribute names and ternary operators

<el-table-column prop="name" :label="langConfig.table.name[lang]" width="200">
            <template slot-scope="scope">
              <div :class="Scope.row. name === 'specialColor'?>{{scope.row.name}}</div>
            </template>
          </el-table-column>
Copy the code

Write specialColor style to set the font color to red

.specialColor{
    color:red;
  }
Copy the code

Set the header style

Requirement: Change the header style to blue background color, white font color, 400 word weight

header-cell-class-name

A callback method for className of header cells. You can also set a fixed className for all header cells using a string.

Type: Function({row, column, rowIndex, columnIndex})/String

Function form: Passes the headerStyle method to header-cell-class-name

<el-table 
          :data="tableData[lang]" 
          class="table" 
          stripe 
          border 
          :header-cell-class-name="headerStyle"
        >
Copy the code

Write headerStyle, return class name tableStyle

headerStyle ({row, column, rowIndex, columnIndex}) {
        return 'tableStyle'
      }
Copy the code

Write a tableStyle style in style

<style lang = "scss">
  .tableStyle{
    background-color: #1989fa! important;
    color:#fff;
    font-weight:400;
  }
</style>
Copy the code

In the string format, the tableStyle name is directly assigned to header-cell-class-name

<el-table 
          :data="tableData[lang]" 
          class="table" 
          stripe 
          border 
          header-cell-class-name="tableStyle"
        >
Copy the code

header-cell-style

Header cell style callback method, can also use a fixed Object to set the same style for all header cells.

Type: Function({row, column, rowIndex, columnIndex})/Object

Function form: Pass the tableHeaderStyle method to header-cell-style

<el-table 
          :data="tableData[lang]" 
          class="table" 
          stripe 
          border 
          :header-cell-style='tableHeaderStyle'
        >
Copy the code

Write the tableHeaderStyle method to return the style

tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
        return 'background-color:#1989fa; color:#fff; font-weight:400; '
      }
Copy the code

Object form: Write styles directly in objects

<el-table 
          :data="tableData[lang]" 
          class="table" 
          stripe 
          border 
          :header-cell-style="{ 'background-color': '#1989fa', 'color': '#fff', 'font-weight': '400' }">
Copy the code

header-row-class-name

The className callback method for the header row of the table can also be used to set a fixed className for all header rows using strings.

Function({row, rowIndex})/String

The usage is similar to that of header-cell-class-name

Header-row-class-name = header-cell-name = header-cell-name = header-row-class-name

Header-row-class-name is added to tr, and header-cell-class-name is added to th.

header-row-class-name:

So if you want styles added to TR to appear, you need to turn off the original TH style in element-UI, otherwise it will be overwritten! (e.g. background colour)

header-cell-class-name:

header-row-style

You can also use a fixed Object to set the same style for all table header rows.

Function({row, rowIndex})/Object

The usage is similar to header-cell-style

Set the line style

Requirement: Set the background color of the rows in the table to light blue

row-class-name

A callback method for the className of a row, or a fixed className can be set for all rows using a string.

Function({row, rowIndex})/String

The usage is similar to that of header-cell-class-name

row-style

It is also possible to use a fixed Object to set the same style for all rows.

Function({row, rowIndex})/Object

The usage is similar to header-cell-style

Function form: Pass the tableRowStyle method to row-style

<el-table 
          :data="tableData[lang]" 
          class="table" 
          border 
          :row-style="tableRowStyle"
        >
Copy the code

Write the tableRowStyle method to return the style

// Change the background color of the table tr row tableRowStyle ({row, rowIndex}) {return 'background-color:#ecf5ff'
      }
Copy the code

Click the button to manipulate the current row

Requirement: Click the button in the operation bar to switch the button state and turn the current line to grey

Add buttons through slot-scope

<el-table-column label="Operation" width="160">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" plain v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)"> Disable the line </el-button> <el-button size="mini" type="primary" plain v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)"</el-button> </template> </el-table-column>Copy the code

Add buttonVisible field to each data and use V-if/V-else instructions to show and hide buttons

{
          date: '2016-05-10',
          name: Wang Tai Hu,
          address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai,
          zip: 200333,
          buttonVisible: true
        }
Copy the code

Write a changeTable method that changes the value of buttonVisible when a button is clicked

changeTable (buttonVisible, index) { this.tableData[index].buttonVisible = ! buttonVisible }Copy the code

Add row-style to el-Table and pass the tableRowStyle method to row-style

<el-table 
          :data="tableData" 
          class="table" 
          border 
          :row-style="tableRowStyle"
        >
Copy the code

Write the tableRowStyle method to set the background color based on the value of buttonVisible for each line

// Change the background color of the table tr row tableRowStyle ({row, rowIndex}) {if (this.tableData[rowIndex].buttonVisible === false) {
          return 'background - color: rgba (243243243, 1)'}}Copy the code