在使用VUE进行系统开发,常用的UI框架就是elementUI框架,在对金钱数字处理的时候,往往右对齐体验更佳,数据右对齐相对比较容易,稍微麻烦的就是单独的表头也要右对齐,下面就简单记录下:
代码示例:
<template> <el-table class="numtable" :data="tableData" style="width: 100%" :header-cell-class-name="headerStyle"> <el-table-column prop="date" label="日期" width="100"></el-table-column> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="money" label="金钱" width="100" align="right"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: ‘2016-05-02‘, name: ‘王小虎‘, money:‘33.52元‘, province: ‘上海‘, city: ‘普陀区‘, address: ‘上海市普陀区金沙江路 1518 弄‘, zip: 200333, tag: ‘家‘ }, { date: ‘2016-05-04‘, name: ‘王小虎‘, money:‘33.52元‘, province: ‘上海‘, city: ‘普陀区‘, address: ‘上海市普陀区金沙江路 1517 弄‘, zip: 200333, tag: ‘公司‘ }, { date: ‘2016-05-01‘, name: ‘王小虎‘, money:‘33.52元‘, province: ‘上海‘, city: ‘普陀区‘, address: ‘上海市普陀区金沙江路 1519 弄‘, zip: 200333, tag: ‘家‘ }, { date: ‘2016-05-03‘, name: ‘王小虎‘, money:‘33.52元‘, province: ‘上海‘, city: ‘普陀区‘, address: ‘上海市普陀区金沙江路 1516 弄‘, zip: 200333, tag: ‘公司‘ }], } }, methods: { headerStyle({ row, column, rowIndex, columnIndex }) { if (columnIndex === 2) { return ‘right-align‘ } } } }; </script> <style> .right-align .cell{color: red; text-align: right;} </style>
效果示例:
到此结束