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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
checkbox 多选框 联动实现代码
Oct 22 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
Python切片工具pillow用法示例
2018/03/30 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
用Python进行websocket接口测试
2020/10/16 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
制作部班长职位说明书
2014/02/26 职场文书
餐厅筹备计划书
2014/04/25 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
警察群众路线整改措施
2014/09/26 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
银行催款通知书
2015/04/17 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server