若依vue-element框架给操作栏或工具栏列添加、隐藏按钮

最新推荐文章于 2025-03-12 11:08:02 发布

拼命_小李

最新推荐文章于 2025-03-12 11:08:02 发布

阅读量5.3k

点赞数

分类专栏：前端文章标签：大数据

本文链接：https://blog.csdn.net/m0_43432638/article/details/125782868

版权

前端专栏收录该内容

23 篇文章

订阅专栏

这篇博客介绍了如何在前端界面中自定义操作栏和工具栏的按钮，包括添加、编辑、删除等操作，并展示了具体的代码示例。通过设置`optShow`属性可以控制按钮的显示和隐藏，例如禁用添加按钮但启用编辑和删除。此外，还提供了在工具栏添加自定义按钮的方法，如创建测试按钮并链接到特定页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、操作栏添加其他按钮，代码

        <el-table-column v-if="checkPer(['admin','sysSyncRecord:edit','sysSyncRecord:del'])" label="操作" width="250px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            >
              <template slot="left">
                <el-button type="info" icon="el-icon-paperclip" size="mini" @click="crud.toEdit(scope.row)" />
              </template>
            </udOperation>
          </template>
        </el-table-column>

2、效果

3、工具栏添加按钮，代码示例

      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <template slot="left">
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-plus"
            @click="autoImpression"
          >
            <router-link :to="'/ess/sealImpression/'">
              测试
            </router-link></el-button>
        </template>
      </crudOperation>

4、隐藏按钮

添加 optShow: { add: false, edit: true, del: true, download: false, reset: true }

  cruds() {
    return CRUD({ title: '测试', url: 'api/sysSyncRecord', idField: 'id', sort: 'id,desc', crudMethod: { ...crudSysSyncRecord }, optShow: { add: false, edit: true, del: true, download: false, reset: true }})
  },