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

记录一下今天在写前端页面时碰到的几个问题，分别是：
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">                    el-table-column>
                <el-table-column prop="pk" label="是否为主键" :formatter="formatBoolean"
                                 :show-overflow-tooltip="true">el-table-column>
              
    
 el-table>

 /*布尔值格式化：cellValue为后台返回的值
*/
            formatBoolean: function (row, column, cellValue) {
                var ret = ''  //你想在页面展示的值
                if (cellValue) {
                    ret = "是"  //根据自己的需求设定
                } else {
                    ret = "否"
                }
                return ret;
            },

更多参考资料：ElementUI动态表格数据转换formatter

2、问题2解决方案:

理论上，问题1的解决方案也能解决本问题，但没做尝试。。。我采用的解决方案是定义一个函数动态计算button的disabled属性值：

<template slot-scope="scope">
    <el-button @click="sendAgain(scope.row)" style="padding: 3px" size="mini" type="success"
            :disabled="sendAgainAbled(scope.row)" icon="el-icon-refresh">重发
    el-button>
template>

sendAgainAbled(param) {
                let data = param.endFlowSign;
                if (data == -1 || data == -3 || data == -5 || data == 2 ) {
                    return true;
                } else {
                    return false;
                }
            }

本方案亲测可用^_

3、问题3解决方案：

该问题之所以成为问题，还是看文档看的不认真，element-ui的table组件介绍最后给了设置的属性，不过没给对应的demo，之前没认真看。。。

所以，解决起来就很简单了：

<el-table
                :data="monitorings"
                style="width: 100%"
                stripe
                v-loading="loading"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                element-loading-text="正在加载..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                align="center">