Vue mouse move in and out of the table, display shadow hidden ICONS, and pop-up prompt content

Effect:

1. Table code:

<el-table :data="tableData" ref="multipleTable" class="multTable" row-key="id" @cell-mouse-enter="mouseOver" @cell-mouse-leave="mouseLeave"> <el-table-column type="index" label=" priority "width="100px"> <template slot-scope="scope"> <i class="iconfont" v-show="scope.row.showIcon">&#xe6ec; </ I > <el-popover placement="top-start" width="200" trigger="hover" content=" I am a tip "> <el-button slot="reference" type="text">{{ scope.$index + 1 }}</el-button> </el-popover> </template> </el-table-column> <el-table>Copy the code

2. Key: @cell-mouse-enter mouse move in @cell-mouse-leave=”mouseLeave” Mouse move out
3. Initialize the table data and define the showIcon field to false

Methods: {this.datalist. ForEach ((item) => {item.showicon = false})}Copy the code

4. Custom pop-up prompt content:

<el-popover placement="top-start" width="200" trigger="hover" content=" I am a prompt content "> <el-button slot="reference" type="text">{{ scope.$index + 1 }}</el-button> </el-popover>Copy the code

5. Mouse move and remove events:

Methods: {mouseOver(row) {row.showicon = true}, mouseLeave(row) {row.showicon = false},}Copy the code