Add a floating prompt for the header icon in the ElementUI table

This article mainly introduces how to add floating prompts to header icons in ElementUI tables, and shares them with you. The details are as follows:

insert image description here

<el-table-column
    label="operation"
    fixed="right"
    :render-header="tableAction"
    width="120">
    <!--scope is userList scope.row is the current row data-->
    <template slot-scope="scope">
        <el-button @click="editCar(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
        <el-button @click="delCar(scope.row.carId)" type="danger"
                   icon="el-icon-delete" circle size="small"></el-button>
    </template>
</el-table-column>

 //Table operation prompt tableAction() {
     return this.$createElement('HelpHint', {
         props: {
             content: 'Edit vehicle/Delete vehicle'
         }
     }, 'operate');
 },

Remember to import

import HelpHint from '~/components/HelpHint/HelpHint.vue';

And introduce it in components

HelpHint.vue component content

<template>
  <span>
    <span style="margin-right: 8px"><slot></slot></span>
    <el-tooltip :content="content" :placement="placement">
      <i class="el-icon-question" style="cursor: pointer;"></i>
    </el-tooltip>
  </span>
</template>
<script>
  export default {
    name: 'HelpHint',
    props: {
      placement:
        default: 'top'
      },
      content: String,
    },
    data() {
      return {}
    },
  }
</script>

This is the end of this article about adding header icon floating prompts in ElementUI tables. For more relevant Element icon floating prompts, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Use vue2+elementui for hover prompts
vue element ui validate actively triggers error prompt operation
Example of using Element Tooltip text prompt
Vue implements the header information prompt function in the element table (recommended)
Element combined with Vue to solve the problem of error prompt when there is value in form validation

<<: SQL to implement time series dislocation restoration case

>>: CSS3 realizes bouncing ball animation