Vue中在table表格中嵌套input标签点击事件实现单行编辑状态更改

在table数据中加一个disabled属性的值

            async getData() {
                let vm = this;
                vm.loading = true;
                let list = await vm.$fetch(vm.$path+'received/BatchCodeWithdrawalInfo/', {
                    page: vm.cur_page,
                    size: vm.pageSize,
                    search: vm.select_word,
                });
                vm.loading = false;
                if( list){
                    let table = list.dataInfo.listData;
                    // vm.tableData.newParam ='vVisible';
                    if(table){
                        for(let i=0; i<table.length; i++){
                            table[i]["vVisible"] = true;
                        }
                    }
                    vm.tableData = table;
                    vm.totalcount = list.dataInfo.pageInfo.total_size;
                }
            },  // 获取table数据

将disabled属性动态绑定至对象中对应的vVisible中

                <el-table-column
                        align="center"
                        prop=""
                        label="样品信息"
                        width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.sample_info" :disabled='scope.row.vVisible'>
                            </el-input>
                        </template>
                </el-table-column>

点击事件传递index参数

                        <el-button
                                @click="handleEdit(scope.$index, scope.row)"  size="small" type="primary" round>编辑
                        </el-button>

改变点击行的disabled属性

            handleEdit(index,row){  
                if(this.tableData[index].vVisible == false){
                    this.tableData[index].vVisible=true;
                }else{
                    this.tableData[index].vVisible = false;
                }
            }, //  退仓信息是否可编辑  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,161评论 1 32
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,119评论 0 0
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,258评论 6 13
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,626评论 0 106
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,375评论 1 41