antd 能自适应吗_Antd表格滚动 宽度自适应 不换行的实例

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

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'属性 导致内容换行

}

}

}

或者可以这样设置

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;

}

如果想要实现当鼠标光标滑过时，即可显示出被隐藏内容的效果，可采用如下方式

实例

部分模块用例信息已成功导入，其余模块用例正在导入中...

添加

:columns="columns"

:dataSource="data"

showHeader

:pagination="ipagination"

@change="handleTableChange"

:scroll="{ x: 1300 }"

rowKey="id">

{{record.preCondition}}

{{priority}}

前置条件

用例步骤

编辑

更多

复制

删除

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()

}

}

}

}

其中，这段代码便是实现此功能的核心，title值便是指被隐藏的内容

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

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