Vueは、Element UIコンポーネントを使用して、フォーム要素の特定のフィールド属性を@メソッドのパラメーターとして取得し、特定の行の行番号や特定のフィールドの値の取得など、非同期リクエストを送信します。

シナリオ分析で
フロントエンドとしてvueを使用し、要素uiのテーブルコンポーネントを使用する場合、最も基本的な追加、削除、および変更を行います。@ 'メソッド名'（パラメーター）を介して現在の行番号またはフィールド値を取得する必要があります。）、次にメソッド{}で非同期リクエストをバックエンドに送信します

次に、質問が来
ます。vueを使用する学生は、v-modelの双方向データバインディングを知っています。これを実行できます。v-modelをテーブルの特定のフィールドに配置し、それをデータに配置します{ return（）{}}属性値を「empty」に設定してから、定義されたメソッドでthis。フィールド名を直接取得します。
コードは次のとおりです。

 <el-table-column
          prop="id" label="序号" width="50" v-model=sid >
 </el-table-column>

 //改变开关状态
      changeSwitch(){
    
    
        this.$http.post("http://localhost:8989/zs/user/changSwitch?status="+!this.changestatus+"&id="+this.sid)
      },

明らかに、上記の方法は機能しません、なぜですか？
Element uiでテーブルコンポーネントを使用する場合、v-forを使用せずにバックエンドから取得したJsonデータをトラバースできる理由は、テーブルの属性値をv-bind：data =“ a”でバインドするためです。 then in data（）{return（）{a []}}ここは通常配列であり、配列内の各要素は通常JavaBeanであることに注意してください。
次に、テーブル内のいくつかのメソッドをバインドすると、コンパイラはバックエンドへの追加、削除、変更のためにフィールド値（sid。）を送り返すために指定する行がわからないため、データの競合が発生するため、この方法は間違いなく機能しません。

解決策
ElementUIによって提供される$ index、行を使用して、各行
のインデックスを取得します（インデックス、ゼロから始まることに注意してください）---------- scope。$ index

各行のデータを取得します----------- scope。$ row（idの値はrow.idから取得できます）

 <template slot-scope="scope">
            <el-switch @change="changeSwitch(scope.row.id)" <!-- 有时需要在前面添加一些参数-->
              v-model="changestatus"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>

Vueは、Element UIコンポーネントを使用して、フォーム要素の特定のフィールド属性を@メソッドのパラメーターとして取得し、特定の行の行番号や特定のフィールドの値の取得など、非同期リクエストを送信します。

おすすめ