el-table点击单元格切换成可输入状态el-input，并且选中内容

最新推荐文章于 2025-04-22 16:52:54 发布

weixin_51010848

最新推荐文章于 2025-04-22 16:52:54 发布

阅读量2.4k

点赞数 1

文章标签： vue.js elementui javascript

文章介绍了如何在Vue的el-table组件中，通过模板插槽和v-if条件渲染，实现表格单元格的点击后动态切换为el-input输入框，以便于用户编辑特定列的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<template>
    <div id="app">
        <el-table :data="dataList" style="width: 100%;" size="small">
            <el-table-column label="序号" width="140" width="60" prop="num" v-model="dataList.num"></el-table-column>
            <el-table-column label="名称" width="120">
                <!-- 关键代码 -->
                <template slot-scope="scope">
                <el-input v-if="scope.row.isnameSelected" v-model="scope.row.name"
                    @focus="focusEvent(scope.row,scope.$index,scope.column)"
                    @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.name}}</p>
                </template>
            </el-table-column>
            <el-table-column label="年龄" width="120">
                <!-- 通过isageSelected显示或隐藏 -->
                <template slot-scope="scope">
                    <el-input v-if="scope.row.isageSelected" v-model="scope.row.age"
                    @focus="focusEvent(scope.row,scope.$index,scope.column)"
                    @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                    <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.age}}</p>
                </template>
            </el-table-column>
            <el-table-column label="金额" width="120">
                <template slot-scope="scope">
                    <!-- 通过issalSelected显示或隐藏 -->
                    <el-input v-if="scope.row.issalSelected" v-model="scope.row.money"
                    @focus="focusEvent(scope.row,scope.$index,scope.column)"
                    @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                    <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.money}}</p>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>
<script>
export default {
  name: 'PoOrderDtl',
  data() {
    return {
                // 需要展示的数据，模拟从接口或组件传递过来的值
        dataList: [
                    { name: "测试1", age: 24, num: 10010, money: "1200" },
                    { name: "测试2", age: 24, num: 10011, money: "1200" },
                    { name: "测试3", age: 24, num: 10012, money: "1200" },
                    { name: "测试4", age: 24, num: 10013, money: "1200" }
                ]
        }
  },

   created() {
       this.getList()
   },
   //自定义指令
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
        el.querySelector('input').select()
      },
    },
  },
  methods: {
    getList() {
       //遍历，给每项数据添加上某列是否被选中的flag，需要改成可修改的列数都要添加flag，且与上面v-if的一致
      this.dataList = this.dataList.map((item) => {
          return { ...item, isnameSelected: false, isageSelected: false, issalSelected: false }
       });
   },
    //点击输入框聚焦，存储当前值
    focusEvent(row, index, column) {
      if (column.label == '名称') {
        row.oldName = row.name
      } else if (column.label == '年龄') {
        row.oldAge = row.age
      } else if (column.label == '金额') {
        row.oldSal = row.money
      }
    },

    //输入框失去焦点触发,此处用提示框提示修改
    blurEvent(row, curIndex, column) {
      if (column.label == '名称') {
        row.isnameSelected = !row.isnameSelected
        if (row.name !== row.oldName) {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000,
          })
        }
      } else if (column.label == '年龄') {
        row.isageSelected = !row.isageSelected
        if (row.age !== row.oldAge) {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000,
          })
        }
      } else if (column.label == '金额') {
        row.issalSelected = !row.issalSelected
        if (row.money !== row.oldSal) {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1000,
          })
        }
      }
    },

    //点击文本触发，显示input框，隐藏p标签
    cellClick(row, column) {
      if (column.label == '名称') {
        row.isnameSelected = !row.isnameSelected
      } else if (column.label == '年龄') {
        row.isageSelected = !row.isageSelected
      } else if (column.label == '金额') {
        row.issalSelected = !row.issalSelected
      }
    },
  }
}

</script>

源网址：el-table点击单元格切换成可输入状态el-input_el-table inut_安之ccy的博客-优快云博客