element-plus のボタンを使用して vue を無効にする

---

序文

皆様こんにちは 今日はelement-plusのボタン無効化についてご紹介したいと思います.これはプロジェクト制作では比較的よくあることです.編集や削除で使用しています.ログインしているユーザーIDで判断しています.データに対応するユーザー ログインしているユーザーIDと同一の場合は編集・削除可能、同一でない場合はボタンが無効となります。

---

1. 使用されるプロパティ

これはボタンのdisabled属性で、属性のデフォルト値はfalse、つまり非無効状態であることがわかるので、ボタンを無効にしたい場合は属性値をtrueに変更する必要があります、ボタンが無効になるようにします。

2.ステップを使用する

1. ユーザー ID を取得する

ユーザーIDで判断しているため、現在ログインしているユーザーIDと各データのユーザーIDが必要です。
以下は、すべてのデータのリストです。

  // 面试记录
  lists();
  function lists() {
    
    
    indexIndex({
    
    
      name: inputSearch.value,
    }).then(function (res) {
    
    
      console.log(res.data); // 成功回调
      tableData.value = res.data.reverse();
    });
  }

現在、tableData はすべてのデータの配列です。
ユーザー ID は次のとおりです。

  const userid = sessionStorage.getItem('inter_userid');

2. 判断する

ボタンタグに属性を直接追加し、disabled 属性の属性値を判定して、各データのユーザー ID とログインユーザー ID が等しくなければ true、つまりそうでなければ true とします。等しい場合、無効な状態になります。

<el-table-column fixed="right" property="address" min-width="140" label="操作" align="center" >
  <template #default="scope">
    <el-button type="danger" :icon="Delete" align="center" :disabled="scope.row.student_id != userid" @click="cancellist(scope.row.id)" />
  </template>
</el-table-column>

---

要約する

この無効化された属性は、他の方法でも無効にすることができ、必要に応じて無効にするかどうかを選択できます。
以上がこの章の全内容です。お役に立てれば幸いです。