An example of Antd table scroll width adaptive non newline

I won't talk too much, let's just look at the code ~

<Table
    className={styles.table}
    rowKey={(record) => record.key}
    columns={columns}
    dataSource={dataSource}
    scroll={{ x: 'max-content' }} //  Plus this one   Transverse rolling   Browser content that supports this property will not wrap 
    pagination={false}
   />

styles.less

.table {
 :global {
  .ant-table-thead > tr > th {
   background: #fff !important;
   white-space: nowrap; //  Prevent IE Browser does not support such as 'max-content' Attribute   Causes content to wrap 
  }
  .ant-table-tbody >tr> td {
   white-space: nowrap; //  Prevent IE Browser does not support such as 'max-content' Attribute   Causes content to wrap 
  }
 }
}

Or you can set it like this

<Table
 pagination={false}
 rowKey={record => record.key}
 dataSource={projectList}
 columns={this.columns.map(item => { //  By configuring   Add a no-wrap attribute to each cell 
  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' } })}
 //  The document says it can be written like this   But I wrote invalid   Don't know why 
/>

Supplementary knowledge: Solve the problem of width invalidation after the content of table table overflow in ant design vue, and replace the exceeded words with ellipsis

style.css

By setting the css style, the overflow content can be replaced by …, where the setting of max-width is very important and must have

/* Unified 1table Size of 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;
}

If you want to display the hidden content when the mouse cursor slides, you can use the following methods

Instances

<template>
 <a-card class="j-address-list-right-card-box" :bordered="false">
  <div>
   <p style="font-size: 13px"> Some module use case information has been successfully imported, and other module use cases are being imported ...</p>
   <a-collapse v-model="activeKey">
    <a-collapse-panel header=" Search use cases " 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"> Add </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> Precondition </h3>
    <a-textarea :value="record.preCondition" style="height: auto" :rows="4"></a-textarea>
    <h3/>
    <h3> Use case steps </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)"> Edit </a>
    <EditCase ref="editCaseObj" @childCaseForm="childCaseForm"/>
    <a-dropdown>
     <a class="ant-dropdown-link">
       More  <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)"> Duplicate </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)"> Delete </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: ' Version number ',
  dataIndex: 'version',
  key: 'version',
  width: '5%'
 },
 {
  title: ' Priority ',
  dataIndex: 'priority',
  key: 'priority',
  width: '5%',
  scopedSlots: { customRender: 'priority' }
 },
 {
  title: ' Use case headings ',
  key: 'title',
  dataIndex: 'title',
  width: '15%'
 },
 {
  title: ' Precondition ',
  dataIndex: 'preCondition',
  key: 'preCondition',
  width: '15%',
  scopedSlots: { customRender: 'preCondition' }
 },
 {
  title: ' Related requirements ',
  dataIndex: 'relatedRequirementsSummary',
  key: 'relatedRequirementsSummary',
  width: '10%'
 },
 {
  title: ' Writer ',
  dataIndex: 'creater',
  key: 'creater',
  width: '10%'
 },
 {
  title: ' Writing time ',
  dataIndex: 'createDateTime',
  key: 'createDateTime',
  width: '15%'
 },
 {
  title: ' Automation ',
  dataIndex: 'auto',
  key: 'auto',
  width: '5%'
 },
 {
  title: ' Use case type ',
  dataIndex: 'type',
  key: 'type',
  width: '5%'
 },
 {
  title: ' Operation ',
  key: 'action',
  scopedSlots: { customRender: 'action' },
  width: '10%'
  // fixed: 'right'
 }

]
const stepColumns = [
 {
  title: ' Numbering ',
  dataIndex: 'number',
  key: 'number',
  width: '10%'
 },
 {
  title: ' Steps ',
  dataIndex: 'description',
  key: 'description',
  scopedSlots: { customRender: 'description' }
 },
 {
  title: ' Anticipation ',
  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 => ` Altogether  ${total}  Bar data `,
    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(' From TreeSearch Component passed by the 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(' Full information about manual use cases under a module: ' + JSON.stringify(res.data.data))
    this.data = res.data.data
    this.ipagination = pagination
   })
  },
  handleTableChange (pagination, filters, sorter) {
   console.log('111 ', pagination, filters, 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(' Use cases to be deleted id : ' + id)
   delManualCaseByCaseId({manualcase_id: id}).then((res) => {
    console.log(' Delete use case results: ' + 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(' Use case steps: ' + JSON.stringify(res.data))
    this.stepData = res.data.data
   })
  },
  childSearchResult (caseData) {
   this.data = caseData
  },
  childCaseForm (flag) {
   if (flag) {
    console.log(' Use case table page ')
    this.getCasesByModuleID()
   }
  }
 }
}
</script>

<style>
</style>

Among them, this code is the core of this function, and the title value refers to the hidden content

< 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" >

Another idea is to set min-width for each cell, but it is best not to wrap the contents in my project