element——table

表格宽度width合理布局

• 不设置width，剩余宽度会分配给所有列；没有剩余宽度时，所有列都会换行；
• min-width 会把剩余宽度按比例分配给所有设置了 min-width 的列；直到没有剩余宽度时，会产生滚动条；
• width是固定宽度，剩余宽度会分配给其他没有设置width的列；没有剩余宽度时，没有设置width的列会换行；
• 对于不确定长度的列，首先需要设置min-width，再设置省略显示:show-overflow-tooltip="true"。当剩余宽度没有时，会显示 …

推荐方案

• 每列都设置min-width，不确定长度的列设置省略显示:show-overflow-tooltip="true"
• 列多的情况可以固定操作栏

复选框，切换页码时保持之前的选中状态不丢失

• table标签添加 row-key="表格数据每条的唯一属性"
• table-column标签添加 reserve-selection 属性

 <el-table :data="tableData" @selection-change="handleSelectionChange" row-key="serviceObjectCode">
      <el-table-column :selectable="selectable" type="selection" reserve-selection width="55"> </el-table-column>
 </el-table>

table-column用到v-if，导致表头顺序错乱

• 每一个column标签上加上唯一key属性

table 添加序号

<el-table-column label="序号" type="index" width="100" align="center">
</el-table-column>

• 关联页码

<el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
    <template scope="scope">
        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
    </template>
</el-table-column>