avue-crud顶部操作按钮插槽；avue-crud列数据插槽；avue-crud行操作按钮插槽

祝你今天也快乐

已于 2024-03-14 17:16:12 修改

阅读量865

点赞数 2

分类专栏： avue 文章标签： java 数据库开发语言

于 2024-03-14 16:58:05 首次发布

本文链接：https://blog.csdn.net/killerdoubie/article/details/136715897

版权

avue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.avue-crud顶部操作按钮插槽；

      <template slot="menuLeft" slot-scope="{ size }">
        <div class="left">
          <div class="btn">
            <el-button type="primary" size="small" @click="onBatchResend">批量重发</el-button>
          </div>
          <div class="numBox">
            <div class="label">发送消息(次)：
              <span class="value">{{ successNum }}</span>
            </div>
            <div class="label">发送成功率(%)：
              <span class="value">{{ successPercent }}</span>
            </div>
          </div>
        </div>
        <Tabs :tabs="topTabs" @changeTab="changeTab" />
      </template>

2.avue-crud列数据插槽；

    <template slot-scope="{row}" slot="status">
        <el-tag :type="row.status == '0' ? 'success' : 'danger'" size="mini">{{ row.status == '0' ? '已启用' : '未启用'
        }}
        </el-tag>
    </template>

3.avue-crud行操作按钮插槽；

     <template slot-scope="scope" slot="menu">
        <el-button type="text" size="mini" @click="onResend(scope.row)">重发</el-button>
      </template>