element 表格中使用if语句,scope写法

最新推荐文章于 2024-01-30 11:40:40 发布

转载最新推荐文章于 2024-01-30 11:40:40 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhuwu/p/8432188.html

文章标签：

本文介绍了一个使用Element UI组件库实现的仓库管理系统中的表格配置方法。该表格具备排序、过滤等功能，并详细展示了如何自定义单元格内容及操作按钮，如编辑、删除等。此外，还介绍了如何根据仓库状态动态显示不同的操作选项。

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

<el-table v-cloak id="mybox" :row-class-name="tableRowClassName" height="100%" :data="pageDate" style="width:100%;height:100%"

:default-sort="{prop: 'date', order: 'descending'}">

<el-table-column prop="name" fixed label="仓库名称" sortable>

</el-table-column>

<el-table-column prop="telePhone" label="电话号码">

</el-table-column>

<el-table-column prop="state" label="仓库状态" sortable>

<span>{{scope.row.state==1?'正常':"关闭"}}</span>

</template>

</el-table-column>

<el-table-column prop="createTime" label="创建时间" sortable>

<span>{{scope.row.createTime |capitalize}}</span>

</template>

</el-table-column>

<el-table-column prop="updateTime" label="修改时间" sortable>

<span>{{scope.row.createTime|capitalize}}</span>

</template>

</el-table-column>

<el-table-column fixed="right" label="操作" fixed width='300px'>

<el-button type="primary" v-if='scope.row.state==1' @click='editModleShow(scope.row)' icon="el-icon-edit" size="small">编辑</el-button>

<el-button type="primary" v-if='scope.row.state==1' @click='deleteModleShow(scope.row)' icon="el-icon-delete" size="small">删除</el-button>

<el-button type="info" v-if='scope.row.state==1' @click='forbidModleShow(scope.row)' icon="el-icon-info" size="small">禁用</el-button>

<el-button type="primary" v-if='scope.row.state==0' plain @click='forbidModleShow(scope.row)' icon="el-icon-success" size="small">启用</el-button>

</template>

</el-table-column>

</el-table>

转载于:https://www.cnblogs.com/zhuwu/p/8432188.html