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

He_wc

已于 2023-12-21 10:28:50 修改

阅读量1.3k

点赞数 28

分类专栏： Vue 学习文章标签： vue.js javascript 前端前端框架

于 2023-12-21 10:19:32 首次发布

本文链接：https://blog.csdn.net/he_9a9/article/details/135124170

版权

Vue 学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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 = "";
      //这里还可以进行其他数据提交等操作
    },
  }