vue+element 可编辑可输入表格

进阶de程序猿

已于 2022-09-07 19:53:32 修改

阅读量1.6k

点赞数 2

分类专栏： vue element 文章标签： vue.js javascript 前端

于 2022-03-18 14:01:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45101496/article/details/123573222

版权

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

element

5 篇文章

订阅专栏

该博客介绍了如何在Vue表格中为'序号'列添加可编辑输入框，点击时切换显示状态并自动聚焦，同时记录和管理isOK标志。作者还展示了cellclick和blurClick方法的使用，以及如何控制输入框的显示和隐藏。

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

<el-table :data="list" border style="width: 100%" @cell-click="cellclick">
     
         <el-table-column prop="" label="序号">
            <template slot-scope="scope">
               <el-input ref="gain" size="mini" v-if="scope.row.isOK" @keyup.native.enter="blurClick(scope)" @blur="blurClick(scope)" v-model="scope.row.sort" style="width:100%;hight:100%"></el-input>
               <span size="mini" v-else>{{scope.row.sort}}</span>
            </template>
         </el-table-column>
       
      </el-table>

 // 点击表格
      cellclick(row, column, cell, event) {
         // console.log(row, column, cell, event);
         if (column.label === "序号") {
            this.$set(row, "isOK", true);
         }
         //   if(column.label === '交易名称'){
         //     this.$set(row, 'isOK2', true)
         //   }
         this.$nextTick(() => {
            this.$refs.gain.focus();
         });
      },
 // 离开焦点
      blurClick({ row, column }) {
         if (column.label === "序号") {
            this.$set(row, "isOK", false);
         }
         console.log(row, column, "----");
         this.top(row.productId, row.sort);
      },