前言:
element-ui的表格超出部分显示省略号。
这里实际是官方有提供的属性:show-overflow-tooltip
使用:注意在哪一行需要显示省略号,就给那个表头加
<el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#F5F7FA' }">
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="organizationName" label="机构名称" header-align="center" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="organizationCode" label="机构编码" header-align="center" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="parentCode" label="上级机构编码" header-align="center" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="projectCode" label="项目编码" header-align="center" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="projectName" label="项目名称" header-align="center" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="organizationType" label="机构类型" header-align="center" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.organizationType == 0">板块</el-tag>
<el-tag type="danger" v-if="scope.row.organizationType == 1">部门</el-tag>
</template>
</el-table-column>
</el-table>