应用场景:当table表格数据遇到一串很长很长很长很长很长长长长长长长长长的字符串的时候,要渲染在页面上会把单元格撑大影响表格的好看。
批改前效果图:
批改后效果图:
办法:应用slice()办法进行截取
<div class="chart_form"> <el-table :data="records" style="width: 100%" @cell-click="txidUrl"> <el-table-column prop="burnTime" label="工夫" width="180"></el-table-column> <el-table-column prop="txid" :formatter="(row,column,cellValue,index) => {return ellipseText(cellValue);}" label="单元格头2" width="180"> </el-table-column> <el-table-column prop="amount" :formatter="(row,column,cellValue,index) => {return convertNum(cellValue);}" label="数量"></el-table-column> <el-table-column prop="amount" :formatter=" (row,column, cellValue,index) => {return convertText(cellValue);}" label="单元格头4"></el-table-column> </el-table> <div class="tabListPage" :xs="24"> <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination> </div></div>
<script>import { api } from "../api/api";export default { data() { return { records: [], textId: "", pageSize: 9, total: 0, currentPage: 1, } }, created() { this.getDestruction(); }, async mounted() { async getDestruction() { let that = this; let res = await api.getDestructionRecords({ pageNum: that.currentPage, pageSize: that.pageSize }); // console.log('Destruction',res) if (res.data.code == 1) { // console.log('Destruction',res) that.records = res.data.data.records; //总数 that.total = res.data.data.total * 1; } else { that.$layer.msg(res.data.msg); } }, //交易ID单元格点击跳转 txidUrl(row, column, cell, event){ console.log('row',row) console.log('column',column) console.log('cell',cell) console.log('event',event) if (column.label == "交易ID") { console.log(row.txExplorer) //跳转链接 window.location.href= row.txExplorer; } }, //分页:页面切换办法 handleCurrentChange(val) { this.currentPage = val; this.getDestruction(); // console.log(`当前页: ${val}`); }, ellipseText(val) { // console.log(val) if (!val) return ""; //截取前六位、后四位,在进行拼接 return val.slice(0, 6) + "******" + val.slice(-4); }, convertNum(val) { if (!val) return ""; return val.substring(0, val.indexOf(".") + 3); }, convertText(val) { if (!val) return ""; return "US$" + (val * this.price).toFixed(2); } }}</script>