在一段很长的文字中间用省略显示

使用场景：当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>