基于el-table的操作栏按钮太多，添加“更多”按钮

最新推荐文章于 2024-07-24 10:40:57 发布

会点法律的程序员

最新推荐文章于 2024-07-24 10:40:57 发布

阅读量1.7k

点赞数 7

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_44436543/article/details/134862203

版权

话不多说上代码：

<el-table-column fixed="right" label="操作" align="left" width="190">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="pricingDetail(scope.row, 1)"
                            v-if="scope.row.finalStatus == 1">修改</el-button>
                        <el-button link type="primary" size="small" @click="pricingDetail(scope.row, 1)"
                            v-if="scope.row.finalStatus == 0">填写</el-button>
                        <el-button link type="primary" size="small" @click="pricingDetail(scope.row, 2)">查看</el-button>
                        <el-popover placement="bottom" :width="150" trigger="click">
                            <template #reference>
                                <el-button link type="primary" size="small">更多</el-button>
                            </template>
                            <div style="width: 90px;">
                                <el-button style="display: block;padding-left: 14px;" link type="primary" size="small" @click="confirmPriceOrder(scope.row, 1)"
                                    v-if="scope.row.finalStatus == 1">确认定价单</el-button>
                                <el-button style="display: block;" link type="primary" v-if="scope.row.finalStatus !== 2" size="small"
                                    @click="reject(scope.row, 1)">驳回报价单</el-button>
                                <el-button style="display: block;" link type="primary" v-if="scope.row.finalStatus !== 2" size="small"
                                    @click="reject(scope.row, 2)">驳回成本投入</el-button>
                                <el-button style="display: block;" link type="primary" v-if="scope.row.finalStatus !== 2" size="small"
                                    @click="reject(scope.row, 0)">全部驳回</el-button>
                                <el-button style="display: block;" link type="primary" size="small" @click="Log(scope.row, 1)"
                                    v-if="scope.row.finalStatus == 0 || 1 || 2">日志</el-button>
                                <el-button style="display: block;" link type="primary" size="small" @click="exportList(scope.row, 2)"
                                    v-if="scope.row.finalStatus == 1 && scope.row.useTo == 0">导出表格</el-button>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>