伏龙阁资源网

Antd表格滚动 宽度自适应 不换行的实例
站长资源 2024/11/25 佚名
2 0

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

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接