付出宝发力小程序_Antd表格滚动 宽度自习气 不换行的实例

Antd表格滚动 宽度自适应 不换行的实例       这篇文章主要介绍了Antd表格滚动 宽度自适应 不换行的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
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: elli凡科抠图is;
 word-wrap: break-word;
 word-break: break-all;
}

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

实例

 template 
 a-card :bordered="false" 
 div 
 p 部分模块用例信息已成功导入,其余模块用例正在导入中... /p 
 a-colla凡科抠图e v-model="activeKey" 
 a-colla凡科抠图e-panel header="搜索用例" key="1" 
 search-cases-form :modulePath="modulePath" :productName="productName" @childSearchResult="childSearchResult"/ 
 /a-colla凡科抠图e-panel 
 /a-colla凡科抠图e 
 /div 
 div 
 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: 'elli凡科抠图is',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" 
 h3 前置条件 /h3 
 a-textarea :value="record.preCondition" :rows="4" /a-textarea 
 h3/ 
 h3 用例步骤 /h3 
 a-table :columns="stepColumns" :dataSource="record.ste凡科抠图" 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-icon type="down"/ 
 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, findAllSte凡科抠图OfOneCaseByManualCaseId } 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.getAllSte凡科抠图ByManualCaseId()
 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.getAllSte凡科抠图ByManualCaseId()
 this.$refs.copyCaseObj.showDrawer()
 getAllSte凡科抠图ByManualCaseId (record) {
 console.log('diaoyong111;' + record)
 findAllSte凡科抠图OfOneCaseByManualCaseId({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: 'elli凡科抠图is',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }" slot="preCondition" slot-scope="text, record"

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

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


相关阅读