Vue表格中鼠标移入移出input显示隐藏 , 不再隐藏的效果
<el-table
ref="table"
:data="tableDatas"
border
style="width: 100%"
:span-method="arraySpanMethod"
id="table"
row-key="id"
@cell-mouse-enter="editCell"
>
<el-table-column
prop="name"
label="排序"
min-width="80"
header-align="center"
align="center"
type="name"
>
<template slot-scope="scope">
<el-input
:ref="`name-${scope.row.id}`"
v-model="scope.row.name"
v-show="scope.row.id === tabClickId && tabClickLabel === '排序'"
placeholder="排序"
@blur="inputBlur(scope.row)"
>
</el-input>
<div
class="cell-text"
v-show="scope.row.id !== tabClickId || tabClickLabel !== '排序'"
>
{
{
scope.row.name }}
</div>
</template>
</el-table-column>
<el-table-column
prop="title"
label="任务标题"
min-width="80"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-input
:ref="`title-${scope.row.id}`"
v-model="scope.row.title"
v-show="
scope.row.id === tabClickId && tabClickLabel === '任务标题'
"
placeholder="任务标题"
@blur="inputBlur(scope.row)"
>
</el-input>
<div
class="cell-text"
v-show="
scope.row.id !== tabClickId || tabClickLabel !== '任务标题'
"
>
{
{
scope.row.title }}
</div>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tabClickId: "",
tabClickLabel: "",
tableDatas: [
{
id: 1,
name: "",
title: "",
},
}
},
methods: {
editCell(item, column, cell, event) {
//根据点击的单元格判断是否可变成输入框
switch (column.label) {
//case内写你的不用鼠标移入显示的名称
case "":
return;
default:
this.tabClickId = item.id;
this.tabClickLabel = column.label;
break;
}
},
// 失去焦点初始化
inputBlur(item) {
this.tabClickId = "";
this.tabClickLabel = "";
//这里还可以进行其他数据提交等操作
},
}
效果如下
默认
鼠标移入
鼠标移出有输入值
