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>