【前端】table中显示布尔值、动态确定按钮状态

最新推荐文章于 2023-11-23 22:29:28 发布

想转IT的机械君

最新推荐文章于 2023-11-23 22:29:28 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： java vue html javascript

本文链接：https://blog.csdn.net/captain_0824/article/details/107369231

版权

本文记录了前端开发中遇到的三个问题：如何在table中正确显示布尔值，根据数据状态动态控制操作按钮的启用或禁用，以及解决table表头和内容的对齐问题。通过使用Element-UI的formatter属性和自定义函数来实现解决方案。

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

记录一下今天在写前端页面时碰到的几个问题，分别是：
1、前端table中需要展示的数据中有几项为布尔值，而页面上不能直接以字符串的形式进行显示；
2、需要根据数据状态确定是否能对该行数据对应的记录进行操作，因为部分数据只是为了展示后台对应的运行状态，其对应的操作按钮应禁用以防止前端误操作；
3、table表头及内容对齐问题；

1、问题1解决方案：

该问题解决方案来自csdn_jy的文章Element-ui中Table表中el-table-column列数据的布尔值回填:
利用table提供的formatter属性，具体操作为：

<el-table :data="rows" ref="datagrid" border="true" highlight-current-row="true" style="width: 100%">
              
                <el-table-column prop="tableId" label="表id" :show-overflow-tooltip="true">