This is the first day of my participation in the More text Challenge. For details, see more text Challenge

Vue Element-UI Table Multiple selection to modify the selected row background color

First look at the renderings:

Overall way of thinking:

  • Add a custom className to the obtained data
  • The className of the current row is obtained from the row-click and select-all events. Modify the className to view the event description
  • Returns the className directly in the callback method for the className of the row (row-class-name)

Note: There is another way to loop through the row, determine whether the id or index of the current clicked row is equal to that of the data, and then store the clicked row in a new array. This way, because it touches the traversal. So when I have 500 rows of data or a lot of data, you can imagine how many times I have to go through this, and the other thing is that there’s a delay when the color changes in consecutive rows, which is relatively poor performance.

Complete the following steps

1, add a custom className to the data, because this demonstration is local data, is directly added className; Real development is to load the data through the interface, and the data obtained can be directly traversed and assigned, and then don’t worry about traversing

data() {
    return {
      tableData: [{date: "2016-05-03".name: "Wang Xiaohu".address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai".className: "normal"}, {date: "2016-05-02".name: "Wang Xiaohu".address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai".className: "normal"}, {date: "2016-05-04".name: "Wang Xiaohu".address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai".className: "normal"}, {date: "2016-05-01".name: "Wang Xiaohu".address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai".className: "normal"}, {date: "2016-05-08".name: "Wang Xiaohu".address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai".className: "normal"}, {date: "2016-05-06".name: "Wang Xiaohu".address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai".className: "normal"}, {date: "2016-05-07".name: "Wang Xiaohu".address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai".className: "normal",}]};Copy the code

2. Click the row and click the checkbox event

methods: { 
   // Manually click the marquee to trigger the event
    handleSelect(selection, row) {
      // Select,row passes two arguments,row is an object directly
      // Pass only one argument to get an array
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal"; }},// select-all Manually select all triggered events
    handleSelectAll(selection) {
      if (selection.length > 0) {
        selection.forEach((item) = > {
          if (item.className === "normal") {
            item.className = "tableSelectedRowBgColor"; }}); }else {
        // The empty array initializes the className
        this.tableData.forEach((item) = > {
          if (item.className === "tableSelectedRowBgColor") {
            item.className = "normal"; }}); }},// Click the row trigger to switch the status of the checkbox
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal"; }}},Copy the code

3. Callback method for className

methods: {
    // Select the background color
    tableRowClassName({ row }) {
      returnrow.className; }},Copy the code

4. Don’t forget to write the class name of the color

<style>
.tableSelectedRowBgColor td {
  background-color: #fedcbd ! important;
}
</style>
Copy the code

How to add hover hints to the element-UI table data?

Scenario: To keep the data text in a table from breaking lines, mouse over it to display the data content, like a tip tip. How do you do that?

Just add a property to achieve, yes that’s so simple, let’s take a look!

Let’s look at the renderings first

Here we use the show-overflow-tooltip property. If you want to display a single line, you can use the show-overflow-Tooltip property, which accepts a Boolean. If true, excess content will be displayed in the form of tooltip when hover.

<el-table :data="tableData">
         <el-table-column
                    label="Header content"
                    align="center"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>Hong Yuan International</span>
                </template>
            </el-table-column>
 </el-table>
Copy the code

How to add hover hints to the header of an Element-UI table?

Scenario: To keep the header text in a table from breaking lines, mouse over it to display the header content, like a tip. How do you do that? Both elements are provided, so let’s take a look!

Let’s look at the renderings first

steps

First, we can set the text ellipsis to display (depending on the need). Note: this will only work if it is set to the. Cell div of the table.

.el-table th>.cell{
    white-space: nowrap; /* The text is displayed on one line without a newline */
　　text-overflow: ellipsis; /* Displays ellipses to represent trimmed text. * /
　　overflow: hidden; /* Hide the part beyond */
}
Copy the code

2. We will use custom headers here. Click here for the official website, and see the Scoped Slot at the end.

3, code,

<el-table :data="tableData">
 　　　　　　<el-table-column align="center">
                <template slot="header" slot-scope="scope">// Ele message prompt component<el-tooltip content="Total Store refunds $" placement="top" effect="light">
                        <span>Total store refund $</span>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <span>{{scope. Row. Data}}</span>
                </template>
            </el-table-column>
</el-table>
Copy the code

parsing

  • The first templete sets slot=”header”, which is the content of the table header; The second templete without setting is the contents of the table row;

  • The content of el-Tooltip is the content of the hover, and span is the header.

  • Table data, using the template data association, browse the website introduction, here is not much to describe;

From there, the setting is complete, and the content of the hover header is displayed!