Antd表格滚动 宽度自适应 不换行的实例


Posted in Javascript onOctober 27, 2020

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

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

/*统一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="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表格滚动 宽度自适应 不换行的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
express启用https使用小记
May 21 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 #Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 #Javascript
js实现简易ATM功能
Oct 27 #Javascript
Antd的table组件表格的序号自增操作
Oct 27 #Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 #Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 #Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 #Javascript
You might like
模板引擎正则表达式调试小技巧
2011/07/20 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python快速查找算法应用实例
2014/09/26 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
python 实现两个线程交替执行
2020/05/02 Python
浅谈Python中的模块
2020/06/10 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
应届生的求职推荐信范文
2013/11/30 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
2014年维修工作总结
2014/11/22 职场文书
考试作弊检讨
2015/01/27 职场文书
自我工作评价范文
2015/03/06 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
高中政治教师教学反思
2016/02/23 职场文书
Python几种酷炫的进度条的方式
2022/04/11 Python