我就廢話不多說了，大家還是直接看程式碼吧~

<Table
    className={styles.table}
    rowKey={(record) => record.key}
    columns={columns}
    dataSource={dataSource}
    scroll={{ x: 'max-content' }} // 加上這條 橫向滾動 支援此屬性的瀏覽器內容就不會換行了
    pagination={false}
   />

styles.less

.table {
 :global {
  .ant-table-thead > tr > th {
   background: #fff !important;
   white-space: nowrap; // 防止IE等瀏覽器不支援'max-content'屬性 導致內容換行
  }
  .ant-table-tbody >tr> td {
   white-space: nowrap; // 防止IE等瀏覽器不支援'max-content'屬性 導致內容換行
  }
 }
}

或者可以這樣設定

<Table
 pagination={false}
 rowKey={record => record.key}
 dataSource={projectList}
 columns={this.columns.map(item => { // 通過配置 給每個單元格新增不換行屬性
  const fun = () => ({ style: { whiteSpace: 'nowrap' } });
  item.onHeaderCell = fun;
  item.onCell = fun;
  return item;
 })}
 loading={getting}
 scroll={{ x: 'max-content' }}
 // onHeaderCell={() => ({ style: { whiteSpace: 'nowrap' } })} 
 // onCell={() => ({ style: { whiteSpace: 'nowrap' } })}
 // 文件裡說可以這麼寫 但是我寫了無效 不知道原因
/>

補充知識：解決ant design vue中table表格內容溢位後，設定的width失效問題，超出的字用省略號代替

style.css

通過設定css樣式，可實現溢位內容以…代替，其中max-width的設定很重要，必須有

/*統一table表格的尺寸*/
.ant-table{
 table-layout: fixed;
}
.ant-table-tbody > tr > td {
 max-width: 200px;
 min-width: 70px;
 border-bottom: 0;
 /*text-align: center !important;*/
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 word-wrap: break-word;
 word-break: break-all;
}

如果想要實現當滑鼠游標滑過時，即可顯示出被隱藏內容的效果，可採用如下方式

例項

<template>
 <a-card class="j-address-list-right-card-box" :bordered="false">
  <div>
   <p style="font-size: 13px">部分模組用例資訊已成功匯入，其餘模組用例正在匯入中...</p>
   <a-collapse v-model="activeKey">
    <a-collapse-panel header="搜尋用例" key="1">
     <search-cases-form :modulePath="modulePath" :productName="productName" @childSearchResult="childSearchResult"/>
    </a-collapse-panel>
   </a-collapse>
  </div>
  <br>
  <div style="margin-bottom: 16px; text-align: left">
   <a-button type="primary" @click="handleAddCase" icon="plus">新增</a-button>
   <AddCase ref="addCaseObj" @childCaseForm="childCaseForm"/>
   <upload-basic/>
  </div>
  <a-table
   :columns="columns"
   :dataSource="data"
   showHeader
   :pagination="ipagination"
   @change="handleTableChange"
   :scroll="{ x: 1300 }"
   rowKey="id">
   <div :title="record.preCondition" :style="{maxWidth: '100px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden',wordWrap: 'break-word',wordBreak: 'break-all' }" slot="preCondition" slot-scope="text,record">
    {{record.preCondition}}
   </div>
   <span slot="priority" slot-scope="priority">
    <a-tag :color="priority==='P1' ? 'volcano' : (priority==='P2' ? 'geekblue' : (priority==='P3' ? 'green' : 'blue'))" :key="priority">{{priority}}</a-tag>
   </span>
   <div slot="expandedRowRender" slot-scope="record" style="width: 100%">
    <h3>前置條件</h3>
    <a-textarea :value="record.preCondition" style="height: auto" :rows="4"></a-textarea>
    <h3/>
    <h3>用例步驟</h3>
    <a-table :columns="stepColumns" :dataSource="record.steps" rowKey="number === null ? currTime : number"></a-table>
   </div>
   <span slot="action" slot-scope="text,record">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="handleEditCase(text,record)">編輯</a>
    <EditCase ref="editCaseObj" @childCaseForm="childCaseForm"/>
    <a-dropdown>
     <a class="ant-dropdown-link">
      更多 <a-icon type="down"/>
     </a>
     <a-menu slot="overlay">
      <a-menu-item>
       <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="handleCopyCase(text,record)">複製</a>
       <CopyCase ref="copyCaseObj" @childCaseForm="childCaseForm"/>
      </a-menu-item>
      <a-menu-item>
       <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="delCase(record.id)">刪除</a>
      </a-menu-item>
      </a-menu>
     </a-dropdown>
   </span>
  </a-table>
 </a-card>
</template>

<script>
import Bus from '../../../../utils/testcenter/bus/bus.js'
import AddCase from '../case_management_add_case/AddCase.vue'
import EditCase from '../case_management_edit_case/EditCase.vue'
import CopyCase from '../case_management_copy_case/CopyCase'
import SearchCasesForm from '../case_management_search_cases_form/SearchCasesForm'
import UploadBasic from '../case_management_upload_basic/UploadBasic'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import { getProductNameAndModulesRange,findAllByModuleId,delManualCaseByCaseId,findAllStepsOfOneCaseByManualCaseId } from '../../../../utils/testcenter/api'

const columns = [
 {
  title: 'ID',dataIndex: 'id',key: 'id',width: '5%'
 },{
  title: '版本號',dataIndex: 'version',key: 'version',{
  title: '優先順序',dataIndex: 'priority',key: 'priority',width: '5%',scopedSlots: { customRender: 'priority' }
 },{
  title: '用例標題',key: 'title',dataIndex: 'title',width: '15%'
 },{
  title: '前置條件',dataIndex: 'preCondition',key: 'preCondition',width: '15%',scopedSlots: { customRender: 'preCondition' }
 },{
  title: '關聯需求',dataIndex: 'relatedRequirementsSummary',key: 'relatedRequirementsSummary',width: '10%'
 },{
  title: '編寫人',dataIndex: 'creater',key: 'creater',{
  title: '編寫時間',dataIndex: 'createDateTime',key: 'createDateTime',{
  title: '自動化',dataIndex: 'auto',key: 'auto',{
  title: '用例型別',dataIndex: 'type',key: 'type',{
  title: '操作',key: 'action',scopedSlots: { customRender: 'action' },width: '10%'
  // fixed: 'right'
 }

]
const stepColumns = [
 {
  title: '編號',dataIndex: 'number',key: 'number',{
  title: '步驟',dataIndex: 'description',key: 'description',scopedSlots: { customRender: 'description' }
 },{
  title: '預期',dataIndex: 'expect',key: 'expect',scopedSlots: { customRender: 'expect' }
 }
]

export default {
 name: 'CasesInfosPageTable',components: {ATextarea,UploadBasic,SearchCasesForm,CopyCase,AddCase,EditCase},data () {
  return {
   data: [],stepData: [],ipagination: {
    defaultPageSize: 50,total: 0,showTotal: total => `共 ${total} 條資料`,showSizeChanger: true,pageSizeOptions: ['10','30','50','100'],// eslint-disable-next-line no-return-assign
    onShowSizeChange: (current,pageSize) => this.pageSize = pageSize
   },moduleId: -1,moduleName: '',modulePath: '',productId: -1,productName: '',page: 1,limit: 50,columns,stepColumns,visible: false,activeKey: ['2'],currTime: ''

  }
 },mounted () {
  var obj = new Date()
  this.currTime = obj.getSeconds() + obj.getMilliseconds()
  var _this = this
  Bus.$on('val',(data1,data2,data3) => {
   console.log('從TreeSearch元件傳遞過來的data1=' + data1 + ' data2=' + data2 + ' data3=' + data3)
   _this.moduleId = data2
   _this.productId = data1
   _this.moduleName = data3
   _this.getCasesByModuleID()
   _this.getProductNameAndModulePath()
  })
 },methods: {
  getProductNameAndModulePath () {
   getProductNameAndModulesRange({product_id: this.productId,module_id: this.moduleId,module_name: this.moduleName}).then((res) => {
    console.log('getProductNameAndModulePath: ' + JSON.stringify(res.data))
    this.productName = res.data.productName
    this.modulePath = res.data.modulesPath
   })
  },getCasesByModuleID () {
   findAllByModuleId({page: this.page,limit: this.limit,module_id: this.moduleId}).then((res) => {
    const pagination = {...this.ipagination}
    pagination.total = res.data.count
    console.log('某個模組下手工用例的全部資訊：' + JSON.stringify(res.data.data))
    this.data = res.data.data
    this.ipagination = pagination
   })
  },handleTableChange (pagination,filters,sorter) {
   console.log('111 ',pagination,sorter)
   this.ipagination.current = pagination.current
   this.ipagination.pageSize = pagination.pageSize
   this.page = pagination.current
   this.limit = pagination.pageSize
   this.getCasesByModuleID()
  },delCase (id) {
   console.log('即將被刪除的用例id：' + id)
   delManualCaseByCaseId({manualcase_id: id}).then((res) => {
    console.log('刪除用例結果：' + res.data)
    this.getCasesByModuleID()
   })
  },handleAddCase () {
   this.$refs.addCaseObj.visible = true
   this.$refs.addCaseObj.productName = this.productName
   this.$refs.addCaseObj.modulePath = this.modulePath
   this.$refs.addCaseObj.moduleId = this.moduleId
   this.$refs.addCaseObj.getProductListByCurrentProduct()
   this.$refs.addCaseObj.getModuleListByCurrentProduct()
   this.$refs.addCaseObj.getVersionListByCurrentProduct()
  },handleEditCase (text,record) {
   console.log('text: ' + JSON.stringify(text))
   console.log('record: ' + JSON.stringify(record))
   this.$refs.editCaseObj.visible = true
   this.$refs.editCaseObj.productName = this.productName
   this.$refs.editCaseObj.modulePath = this.modulePath
   this.$refs.editCaseObj.moduleId = this.moduleId
   this.$refs.editCaseObj.rowRecord = record
   this.$refs.editCaseObj.getProductListByCurrentProduct()
   this.$refs.editCaseObj.getModuleListByCurrentProduct()
   this.$refs.editCaseObj.getVersionListByCurrentProduct()
   this.$refs.editCaseObj.getAllStepsByManualCaseId()
   this.$refs.editCaseObj.showDrawer()
   this.getCasesByModuleID()
  },handleCopyCase (text,record) {
   console.log('text: ' + JSON.stringify(text))
   console.log('record: ' + JSON.stringify(record))
   this.$refs.copyCaseObj.visible = true
   this.$refs.copyCaseObj.productName = this.productName
   this.$refs.copyCaseObj.modulePath = this.modulePath
   this.$refs.copyCaseObj.moduleId = this.moduleId
   this.$refs.copyCaseObj.rowRecord = record
   this.$refs.copyCaseObj.getProductListByCurrentProduct()
   this.$refs.copyCaseObj.getModuleListByCurrentProduct()
   this.$refs.copyCaseObj.getVersionListByCurrentProduct()
   this.$refs.copyCaseObj.getAllStepsByManualCaseId()
   this.$refs.copyCaseObj.showDrawer()
  },getAllStepsByManualCaseId (record) {
   console.log('diaoyong111;' + record)
   findAllStepsOfOneCaseByManualCaseId({manualcase_id: record.id}).then((res) => {
    console.log('用例步驟：' + JSON.stringify(res.data))
    this.stepData = res.data.data
   })
  },childSearchResult (caseData) {
   this.data = caseData
  },childCaseForm (flag) {
   if (flag) {
    console.log('用例表格頁')
    this.getCasesByModuleID()
   }
  }
 }
}
</script>

<style>
</style>

其中，這段程式碼便是實現此功能的核心，title值便是指被隱藏的內容

<div :title="record.preCondition" :style="{maxWidth: '100px',record">

另一個思路是設定每個單元格的min-width,不過我的專案中的內容是最好不要換行的

以上這篇Antd表格滾動 寬度自適應 不換行的例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。