Antd表格滚动宽度⾃适应不换⾏的实例
我就废话不多说了，⼤家还是直接看代码吧~
<Table
className={styles.table}
rowKey={(record) => record.key}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content' }} // 加上这条横向滚动⽀持此属性的浏览器内容就不会换⾏了
pagination={fal}
/>
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'属性导致内容换⾏
}transun
}
}
或者可以这样设置
<Table
pagination={fal}
rowKey={record => record.key}
dataSource={projectList}
columns={lumns.map(item => { // 通过配置给每个单元格添加不换⾏属性
const fun = () => ({ style: { whiteSpace: 'nowrap' } });
| 请输入内容 |
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="fal">
<div>
<p >部分模块⽤例信息已成功导⼊，其余模块⽤例正在导⼊中...</p>
<a-collap v-model="activeKey">
<a-collap-panel header="搜索⽤例" key="1">
<arch-cas-form :modulePath="modulePath" :productName="productName" @childSearchResult="childSearchResult"/>
</a-collap-panel>
</a-collap>
</div>
<br>
<div >
<a-button type="primary" @click="handleAddCa" icon="plus">添加</a-button>
<AddCa ref="addCaObj" @childCaForm="childCaForm"/>
<upload-basic/>
</div>
<a-table
:columns="columns"
:
dataSource="data"
showHeader
:pagination="ipagination"
@change="handleTableChange"
:scroll="{ x: 1300 }"
rowKey="id">
<div :title="record.preCondition" : 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' : 'bl
ue'))" :key="priority">{{priority}}</a-tag>
</span>
<div slot="expandedRowRender" slot-scope="record" >
<h3>前置条件</h3>
<a-textarea :value="record.preCondition" :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="handleEditCa(text, record)">编辑</a>
<EditCa ref="editCaObj" @childCaForm="childCaForm"/>
<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="handleCopyCa(text, record)">复制</a>
<CopyCa ref="copyCaObj" @childCaForm="childCaForm"/>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="delCa(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 AddCa from '../ca_management_add_ca/AddCa.vue'
import EditCa from '../ca_management_edit_ca/EditCa.vue'
import CopyCa from '../ca_management_copy_ca/CopyCa'
import SearchCasForm from '../ca_management_arch_cas_form/SearchCasForm'
import UploadBasic from '../ca_management_upload_basic/UploadBasic'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import { getProductNameAndModulesRange, findAllByModuleId, delManualCaByCaId, findAllStepsOfOneCaByManualCaId } 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: 'CasInfosPageTable',
components: {ATextarea, UploadBasic, SearchCasForm, CopyCa, AddCa, EditCa},
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: fal,
activeKey: ['2'],
currTime: ''
}
},
mounted () {
var obj = new Date()
this.currTime = Seconds() + Milliconds()
var _this = this
Bus.$on('val', (data1, data2, data3) => {
console.log('从TreeSearch组件传递过来的data1=' + data1 + ' data2=' + data2 + ' data3=' + data3)every teardrop is a waterfall
_duleId = data2
_this.productId = data1
_duleName = data3
_CasByModuleID()
ProductNameAndModulePath()
})
},
methods: {
getProductNameAndModulePath () {
getProductNameAndModulesRange({product_id: this.productId, module_id: duleId, module_n
ame: duleName}).then((res) => { console.log('getProductNameAndModulePath: ' + JSON.stringify(res.data))
this.productName = res.data.productName
})
},
getCasByModuleID () {
findAllByModuleId({page: this.page, limit: this.limit, module_id: duleId}).then((res) => {
const pagination = {...this.ipagination}
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
},工作分析方法
delCa (id) {
console.log('即将被删除的⽤例id：' + id)
delManualCaByCaId({manualca_id: id}).then((res) => {
console.log('删除⽤例结果：' + res.data)
})
},
handleAddCa () {
this.$refs.addCaObj.visible = true
this.$refs.addCaObj.productName = this.productName
this.$dulePath = dulePath
this.$duleId = duleId
this.$ProductListByCurrentProduct()
this.$ModuleListByCurrentProduct()
this.$VersionListByCurrentProduct()
},
handleEditCa (text, record) {
console.log('text: ' + JSON.stringify(text))
console.log('record: ' + JSON.stringify(record))
this.$refs.editCaObj.visible = true
this.$refs.editCaObj.productName = this.productName
this.$dulePath = dulePath
this.$duleId = duleId
this.$wRecord = record
this.$ProductListByCurrentProduct()
this.$ModuleListByCurrentProduct()
this.$VersionListByCurrentProduct()
this.$AllStepsByManualCaId()
this.$refs.editCaObj.showDrawer()
},
handleCopyCa (text, record) {
console.log('text: ' + JSON.stringify(text))
console.log('record: ' + JSON.stringify(record))
this.$pyCaObj.visible = true
this.$pyCaObj.productName = this.productName
this.$dulePath = dulePath
this.$duleId = duleId
this.$wRecord = record
this.$ProductListByCurrentProduct()
this.$ModuleListByCurrentProduct()
this.$VersionListByCurrentProduct()
this.$AllStepsByManualCaId()
this.$pyCaObj.showDrawer()
},
getAllStepsByManualCaId (record) {
console.log('diaoyong111;' + record)
findAllStepsOfOneCaByManualCaId({manualca_id: record.id}).then((res) => {
console.log('⽤例步骤：' + JSON.stringify(res.data))
this.stepData = res.data.data
})
},
childSearchResult (caData) {
this.data = caData
},
childCaForm (flag) {
classifyif (flag) {
console.log('⽤例表格页')
}
}
}
}
2011年浙江省高考分数线
</script>
<style>
</style>
其中，这段代码便是实现此功能的核⼼，title值便是指被隐藏的内容
<div :title="record.preCondition" : slot="preCondition" slot-scope="text, record">
另⼀个思路是设置每个单元格的min-width, 不过我的项⽬中的内容是最好不要换⾏的
以上这篇Antd表格滚动宽度⾃适应不换⾏的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
