vue data formatting filters, formatter
1. The filters filter function can be used in two places
- 1. Double brace expression {{ Text String | Filter Function }}
- -bind:str= "Text string | filter function"
The following examples are rounding, and filters are connected in series 11.11
<template> <div style="text-align:right;margin-bottom:10px"> lump sum: <span class="color-blue font18">¥{{ listAmount | numFilter }}Yuan </span> <!-- 0.11 --> <span class="color-blue font18">¥{{ listAmount | Hundredfold | numFilter }}Yuan </span> <!-- 11.11 --> </div> </template> <script> export default { name: "OpeningList", data: function() { return { listAmount: 0.111119 } } }, filters: { Hundredfold(value) { return realVal*100; }, numFilter(value) { const realVal = parseFloat(value).toFixed(2); return realVal; } }, mounted: function() { } </script>
2. Table :formatter=function
<template> <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" > <el-table-column prop="name" label="Name" s width="180"> </el-table-column> <el-table-column prop="address" label="address" :formatter="formatter"> </el-table-column> <!-- address:Jinshajiang Road, Putuo District, Shanghai 1518 alley --> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: 'Wang Xiaohu', address: 'Lian 1518, Jinshajiang Road, Putuo District, Shanghai' }, { date: '2016-05-04', name: 'Wang Xiaohu', address: 'Lian 1517, Jinshajiang Road, Putuo District, Shanghai' }, { date: '2016-05-01', name: 'Wang Xiaohu', address: 'Lian 1519, Jinshajiang Road, Putuo District, Shanghai' }, { date: '2016-05-03', name: 'Wang Xiaohu', address: 'Lan 1516, Jinshajiang Road, Putuo District, Shanghai' }] } }, methods: { formatter(row, column) { return 'address:'+; } } } </script>
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.