element-实现表格内修改

最新推荐文章于 2023-04-21 17:27:52 发布

ygkyufcl

最新推荐文章于 2023-04-21 17:27:52 发布

阅读量534

点赞数

分类专栏： Vue element 文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/ygkyufcl/article/details/109364651

版权

Vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

element

4 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Element UI库实现表格内的数据编辑功能，包括步骤和关键代码示例，帮助开发者提升前端交互体验。

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

一、

<el-table-column
  prop="serial"
  label="序号"
  ><template slot-scope="scope">
    <span
      @click.stop="scope.row.showInput = true"
      style="display: inline-block;width: 100%;"
      v-if="!scope.row.showInput"
      >{{ scope.row.serial }}</span
    >
    <el-input
      v-focus
      size="small"
      @change="changeSerial(scope.row)"
      @blur="scope.row.showInput = false"
      v-if="scope.row.showInput"
      v-model="scope.row.serial"
    ></el-input>
  </template>
</el-table-column>

二、

export default {
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        for(let i=0;i<el.childNodes.length;i++){
          if(el.childNodes[i].nodeName=='INPUT'){
            el.childNodes[i].focus()
          }
        }
      }
    }
  },
  data () {
  	 return {
		tabData:[{showInput:false,serial:0}]
	 }
   },
	methods:{
		changeSerial(row){
		    console.log(roe.data)
		}
	}
}