ant中的table行列不对齐问题，以及换行，隐藏等问题

ゝ一世哀愁。 2021-07-24 12:24 2037阅读 0赞

**注意：ant中的table表格，列的宽度如果设置了，那么该列就是设置的宽度；那些没设置宽度的列，列宽=（总宽度 - 设置的列宽总和）/ 未设置的列的个数，即平均宽度；**

1.如果表格只是设置了:scroll="\{ x : 1550\}"，不设置y，那么表格行列是可以对齐的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]

2.但是遇到需求想要将表头给固定掉，这时候就需要设置高度y，这时候就出现列不对齐的情况

![在这里插入图片描述][20200806183931721.png]

高度等于浏览器可视区减去一定的筛选部分高度  
![在这里插入图片描述][20200806183958233.png]

此时列表行列不对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 2]

3.这时候只需要将每一列设置宽度，余下其中一列 不设置宽度，同时将x宽度设置必列的宽度的总和还要大就可以了（大力出奇迹）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 4]  
分割  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.  
.

4.关于某一行的内容太多，未设置列宽度，那么就会被平均，导致有换行问题；  
如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 6]

**处理1：如果想强制换行**  
把这两句加在对应控制table样式文件中，就不会分行了

.ant-table-thead > tr > th{ 
    white-space:nowrap;
    }
    .ant-table-row td{ 
    white-space:nowrap;
    }

处理2：给该列设置宽度，超出部分隐藏，配合toolTip做提示即可；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 7]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 8]

**总结：设置x，y滚动固定；列设置宽度，余下最长的一列不设置宽度，超出隐藏；**

<a-table
              :loading="loading"
              :columns="columns"
              :data-source="data"
              class="components-table-demo-nested"
              @change="onChangeTable"
              :scroll="{x:1300,y:y}"
              :pagination="pagination"
              :locale="locale"
            >

const columns = [
      { 
        title: "任务名称",
        // dataIndex: "distributeName",
        scopedSlots: {  customRender: "distributeName" },
        key: "distributeName",
        ellipsis: true,
      },
      { 
        title: "分发方",
        dataIndex: "distributorName",
        key: "distributorName",
      },
      {  title: "接收方", scopedSlots: {  customRender: "receiver" }, key: "receiver", ellipsis: true },
      { 
        title: "关联凭证",
        key: "distributeAssDoc",
        scopedSlots: {  customRender: "distributeAssDoc" },
        ellipsis: true,
      },
      { 
        title: "是否周期",
        key: "isPeriod",
        scopedSlots: {  customRender: "isPeriod" },
      },

<a slot="distributeAssDoc" slot-scope="text">
                <a-tooltip placement="topLeft">
                  <template slot="title">{ { text.distributeAssDoc}}</template>
                  <span v-if="text.distributeAssDoc" class="decBox">{ { text.distributeAssDoc}}</span>
                </a-tooltip>
                <a-tag
                  v-if="!text.distributeAssDoc"
                  color="geekblue"
                  @click="addUpgradeNum(text.id,text.key)"
                >输入凭证</a-tag>
              </a>

.ant-table-tbody > tr > td a .decBox { 
        font-size: 12px !important;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 550 !important;
        color: rgba(53, 58, 64, 1) !important;
        line-height: 20px;
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70]: /images/20210724/d90f979305024b629e18c60d9f1c7c9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 1]: /images/20210724/1370697af66b4e3fbd57d70f12265fc1.png
[20200806183931721.png]: /images/20210724/fe959fc10f4041d8a6ea12fec9f406f6.png
[20200806183958233.png]: /images/20210724/dccbbaf553b84ac6a9566dba24732620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 2]: /images/20210724/616e36b3fc9544d18d9ba5e3d91e56f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 3]: /images/20210724/0c56b63a01274c86a4c8ba5b3e78b419.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 4]: /images/20210724/74fefff9e8e94077ab9e1b3b4439b0cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 5]: /images/20210724/e7ffd2b529cf4c74b75b876c7ab0594c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 6]: /images/20210724/0df46c01f482413187f237fa751e0019.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 7]: /images/20210724/2bb2e6fac70e41e1a04757e8c2e229a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70 8]: /images/20210724/0cb3a35b0dc04130a7697a318368633b.png