Element组件Table 表格遇到的小坑

Table 表格

 <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            border
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              property="id"
              label="ID"
              width="199"
              show:"false"
              align="center">
            </el-table-column>

           <el-table-column
              property="validity"
              label="是否有效"
              width="50"
              align="center"
              :formatter="formatValidity">
            </el-table-column>
            

         <el-table-column
              property="isCount"
              label="正在休假"
              width="50"
              align="center">
                <template scope="scope">
                    <span v-if="scope.row.isCount=='0'" style="color: red">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>

            <el-table-column
              property="endTime"
              label="不参与计算结束日期"
              width="140"
              v-if="false"
              align="center">
       </el-table-column>
  </el-table>

1、数据格式化：可以在列上绑定事件 :formatter="formatValidity"

           formatValidity:function(row, column){//员工有效性转换
                return row.validity == 1 ? '是' : '否';
            },

2、想让格式化后字显示颜色，比如：“否” 显示为红色

      原本想这样写：

      formatValidity:function(row, column){//员工有效性转换
                return row.validity == 1 ? '是' : '<font color='red'>否</font>';
       },

       但是不起作用，反而是将<font color='red'>否</font>全部显示在表格中；

       几番咨询度娘后，得到这样的写法：

        <template scope="scope">
                    <span v-if="scope.row.isCount=='0'" style="color: red">是</span>
                    <span v-else>否</span>
         </template>

         

3、想要隐藏一列，使用 show:"false"或者v-if="false"都可以

4、鼠标悬停在按钮上时显示文字

    <el-button type="danger" v-if="delbtn" @click="delIsCount"  title="删除已有的休假记录">删 除</el-button>