vue+element中table踩坑

vue+element中使用table踩坑

1.开发环境 vue.js
2.电脑系统 windows 10 专业版
3.在开发的过程中,我们经常会使用 vue+element进行开发,使用这样的效果!
4.整体思路:

使用 vue + element 进行开发,使用 element 中的 table ### 树形数据与懒加载

5.在项目中,我们经常会点击的时候向后台传一些值,一般都是 id 的比较多,那么在点击的时候怎么获取到 对应的 id 呢?
方法如下:

//在vue模板中添加如下代码:

6.在methods 中添加如下代码:

//点击修改
      xiugai(  rows){
        var _this=this;
        console.log(rows)
        console.log("我是修改------------------------");
        // console.log(rows[index]);
        // _this.bianhao=rows[index].code;
        // _this.mingcheng=rows[index].name;
        // // _this.handleAdd();
        // _this.handleEdit();

        console.log("我是对应的id");
        console.log(rows[index].id);
        _this.chenxgid=rows[index].id;
        var dd={
          id:rows[index].id
        }

        chenxiugai(dd).then(res=>{
          console.log("传完id之后,后台返回对应的数据");
          console.log(res);
          if (res.id!=""){
            //如果 id不为空,表示有数据,
            _this.handleEdit();
          //  把后台的数据渲染到表单上面
            _this.hqxg=res.data;
            _this.bianhao=_this.hqxg.code;
            _this.mingcheng=_this.hqxg.name;

          }
        })
      },

7.在浏览器的控制台中,你就会看到对应的输出结果。是不是很简单,是不是很棒!让我们一起努力走向巅峰!在这个领域不要认输,不要低头,不要放弃!
//本期的教程到了这里就结束啦,希望对你有所帮助!让我们一起加油!