Element 表格

1、文字过长，隐藏超出部分

解决方法：使用 :show-overflow-tooltip="true"，实现自动隐藏

<el-table:data="dataList">
    <el-table-column prop="address" label="地址" :show-overflow-tooltip="true">
    </el-table-column>
</el-table>

2、循环表格列，并且编译某一列

<el-table :data="dataList">
    <template v-for="(item, index) in tableHeaders">
        <el-table-column :prop="item.prop" :label="item.label" v-if="item.prop === 'status'">
            <template slot-scope="{row}">
                <span v-if="row.status === '1'">未报废</span>
                <span v-else-if="row.status === '0'">已报废</span>
            </template>
        </el-table-column>
        <el-table-column :prop="item.prop" :label="item.label" v-else></el-table-column>
    </template>
</el-table>

3、字符转换

<template slot-scope="scope">
    <span v-if="typeOptions.find((item) => item.value === '' + scope.row.type)">
        {{typeOptions.find((item) => item.value === '' + scope.row.type).label}}
    </span>
    <span v-else>-</span>
</template>

 4、表头过长，隐藏超出部分

<el-table border show-summary :data="dataList">
    <el-table-column :render-header="renderHeader"></el-table-column>
</el-table>

methods: {
    renderHeader(h, { column }) {
        return h('div', { style: 'width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' }, column.label);
    },
}