我就废话不多说了，大家还是直接看代码吧~

<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的设置很重要，必须有

.ant-table{ table-layout: fixed;}.ant-table-tbody > tr > td { max-width: 200px; min-width: 70px; border-bottom: 0; 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', width: '5%' }, { 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', width: '10%' }, { title: '编写时间', dataIndex: 'createDateTime', key: 'createDateTime', width: '15%' }, { title: '自动化', dataIndex: 'auto', key: 'auto', width: '5%' }, { title: '用例类型', dataIndex: 'type', key: 'type', width: '5%' }, { title: '操作', key: 'action', scopedSlots: { customRender: 'action' }, width: '10%' // fixed: 'right' }]const stepColumns = [ { title: '编号', dataIndex: 'number', key: 'number', width: '10%' }, { 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, 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('即将被删除的用例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',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }" slot="preCondition" slot-scope="text, record">

另一个思路是设置每个单元格的min-width, 不过我的项目中的内容是最好不要换行的

以上这篇Antd表格滚动 宽度自适应 不换行的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。