ant-table 组件 中 列 如何 固定宽度，不因内容过长而变形

 

 

（1）先自定义样式tooltipSlot

<a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange" bordered>

        
        <!-- 自定义 样式 -->
        <template slot="tooltipSlot" slot-scope="text, record, index">
          <a-tooltip placement="topLeft" :title="text">
            <div style="width:150px;height:50px; overflow:hidden;">{{text}}</div>
          </a-tooltip>
        </template>

</a-table>

（2）在scopedSlots处 使用该自定义样式tooltipSlot

data() {
      return {
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '操作名称',
            dataIndex: 'logName',
            align: 'center',
          },
          {
            title: 'IP',
            dataIndex: 'ip',
            align: 'center',
          },
          {
            title: 'URL',
            dataIndex: 'requestUrl',
            align: 'center',
            scopedSlots: { customRender: 'tooltipSlot' }
          },
          {
            title: '方式',
            dataIndex: 'requestMethod',
            align: 'center',
            customRender: function(text){
              // 请求方式 1 POST 2 PUT 3 GET 4 DELETE
              if(1==text){
                return 'POST'
              }else if(2==text){
                return 'PUT'
              }else if(3==text){
                return 'GET'
              }else if(4==text){
                return 'DELETE'
              }else{
                return ''
              }
            }
          },
          {
            title: '参数',
            dataIndex: 'requestParam',
            align: 'center',
            scopedSlots: { customRender: 'tooltipSlot' }
          },
          {
            title: '耗时（秒）',
            dataIndex: 'costTime',
            align: 'center',
            customRender: function(text){
              return text/1000
            }
          },
          {
            title: '错误信息',
            dataIndex: 'errorInfo',
            align: 'center',
            scopedSlots: { customRender: 'tooltipSlot' }
          },
          {
            title: '用户名称',
            dataIndex: 'username',
            align: 'center',
          },
          {
            title: '操作时间',
            dataIndex: 'createTime',
            align: 'center',
            customRender: text => moment(text).format('YYYY-MM-DD HH:mm:ss')
          }
        ],
        //数据集
        dataSource: [],
        // 分页参数
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        }
        loading: false
      }
    },

（3）固定列宽度

<style scoped>

  >>> .ant-table-body tr>td{
    width: 150px;
  }

</style>

（4）效果如下图