foreword

Hello everyone, today I would like to share with you the disabling of buttons in element-plus. This is relatively common in project production. I use it in editing and deleting. It is judged according to the logged-in user id. If the user corresponding to the data If the id is the same as the user id you log in, you can edit and delete. If not, the button is disabled.

1. The properties used

insert image description here
This is a disabled attribute of the button. You can see that the default value of the attribute is false, that is, the non-disabled state, so if you want the button to be disabled, you need to change the attribute value to true, so that the button is disabled.

2. Use steps

1. Get user id

Because I use the user id to judge, we need to know the currently logged-in user id and the user id of each data.
The following is a list of all data:

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

Now tableData is an array of all data.
The following are user ids:

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

2. Make judgments

We directly add attributes in the button tag, and we judge the attribute value of the disabled attribute. If the user id of each data is not equal to the logged-in user id, it will be true, that is, if it is not equal, it will be in the disabled state.

<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>

Summarize

This disabled attribute can also be disabled by other methods, and you can choose whether to disable it or not according to your own needs.
The above is the whole content of this chapter, I hope it can help you.

vue disable using button in element-plus

Article directory