解决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:;" @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:;" @click="handleCopyCase(text, record)">复制</a>
              <CopyCase ref="copyCaseObj" @childCaseForm="childCaseForm"/>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @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">