element-ui的表格超出部分显示省略号

前言:

      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>

猜你喜欢

转载自blog.csdn.net/m0_57071129/article/details/125299136
今日推荐