vue+element中table踩坑

vue+element中使用table踩坑

1.開發環境 vue.js
2.電腦系統 windows 10 專業版
3.在開發的過程當中,咱們常常會使用 vue+element進行開發,使用這樣的效果!
4.總體思路:

使用 vue + element 進行開發,使用 element 中的 table ### 樹形數據與懶加載

5.在項目中,咱們常常會點擊的時候向後臺傳一些值,通常都是 id 的比較多,那麼在點擊的時候怎麼獲取到 對應的 id 呢?
方法以下:

//在vue模板中添加以下代碼:

<el-table-column
          fixed="right"
          label="操做"
          width="140">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="handleAdd(scope.$index,tableData)"
              type="text"
              size="small">
              新增
            </el-button>
            <el-button
              @click="xiugai(scope.row)"
              type="text"
              size="small">
              修改
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index,tableData)"
              type="text"
              size="small">
              移除
            </el-button>
            <!-- 修改 按鈕-->
          </template>
        </el-table-column>

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.在瀏覽器的控制檯中,你就會看到對應的輸出結果。是否是很簡單,是否是很棒!讓咱們一塊兒努力走向巔峯!在這個領域不要認輸,不要低頭,不要放棄!
//本期的教程到了這裏就結束啦,但願對你有所幫助!讓咱們一塊兒加油!