Vue表格中鼠标移入移出input显示隐藏 ,有输入值不再隐藏

本文主要是介绍Vue表格中鼠标移入移出input显示隐藏 ,有输入值不再隐藏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue表格中鼠标移入移出input显示隐藏 , 不再隐藏的效果

	<el-tableref="table":data="tableDatas"borderstyle="width: 100%":span-method="arraySpanMethod"id="table"row-key="id"@cell-mouse-enter="editCell"><el-table-columnprop="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><divclass="cell-text"v-show="scope.row.id !== tabClickId || tabClickLabel !== '排序'">{{ scope.row.name }}</div></template></el-table-column><el-table-columnprop="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><divclass="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 = "";//这里还可以进行其他数据提交等操作},}