vue 查找数组对象中是否存在某个值

最新推荐文章于 2024-05-17 18:47:37 发布

性野喜悲

最新推荐文章于 2024-05-17 18:47:37 发布

阅读量1.7k

点赞数

分类专栏： vue 经验分享文章标签：前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/leng0920/article/details/129408803

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

当表格数据中的角色列表包含超级管理员时，删除按钮会被设置为灰色并禁用。代码示例展示了如何在ElemeUI的表格组件中实现这一功能，通过遍历角色列表并使用some方法检查是否存在超级管理员，动态地给删除按钮添加class和禁用属性。

摘要由CSDN通过智能技术生成

列表角色包含‘超级管理员’时删除按钮置灰

//this.tableData=[{createTime:"2021-08-10 16:17:18",roleList: [{roleId: "2071802768015679540", roleName: "测试角色"}, {roleId: "2062895985096130886", roleName: "超级管理员"}]}]
 
<el-table :data="tableData" style="width: 100%">
          
                <el-table-column label="所属角色" min-width="160" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-for="(item, index) in scope.row.roleList" :key="index">{{
                      scope.row.roleList.length - 1 !== index ? item.roleName + '，' : item.roleName
                    }}</span>
                  </template>
                </el-table-column>
               
                <el-table-column label="操作" width="118" fixed="right">
                  <template slot-scope="scope">
                  //blue-text为蓝色字体样式，disabled-text为灰色字体样式
                    <el-button
                      type="text"
                      :class="scope.row.roleList.some(item => item.roleName =='超级管理员')?'disabled-text':'blue-text'"
                      :disabled="scope.row.roleList.some(item => item.roleName =='超级管理员')"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
             
              </el-table>

效果图：