关于vue.js:在一段很长的文字中间用省略显示

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