ElementUI的el-table的el-table-column内容过长处理

很多时候会使用到 elementui 的表格组件，有些需求的表格内容特别长，这时候需要使用插槽和el-tooltip来展示内容，需要给表格列固定宽

<template>
  <div style="width: 1200px;margin: 0 auto;margin-top: 50px;">
    <el-table :data="tableData" border :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="status" label="描述" width="200">
        <template slot-scope="scope">
          <!-- 小于12位默认展示 -->
          <div v-if="scope.row.val.length <= 12">{{ scope.row.val }}</div>
          <!-- 大于12为只展示12位 -->
          <el-tooltip v-if="scope.row.val.length > 12" popper-class="testtooltip" :content="scope.row.val" placement="top-start">
            <div>{{ scope.row.val.slice(0, 12) }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickGet(scope.row)">查看</el-button>
          <el-button type="text" @click="handleClickEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleClickDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

JavaScript

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', val: '在当下这个数字化时代下，ChatGPT 的横空出世，不仅颠覆了人们对于 AI 的传统认知，也带来了 AIGC 类新技术的井喷式发展，使得 AI 在全球范围内掀起了新一轮科技革命。从无人驾驶汽车到智能助手，从医疗诊断到自然语言处理，各个领域都在纷纷借助 AI 技术来实现革命性突破，这也为全球 AI 领域的热度与创新潜力带来了蓬勃发展，吸引着创意无限的开发者们。' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', val: '这是一段普通的文字描述。' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', val: '这是一段普通的文字描述。' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', val: '这是一段普通的文字描述。' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', val: '这是一段普通的文字描述。' }
      ]
    }
  },
  methods: {
    // 查看
    handleClickGet(val) {
      console.log(val);
    },
    // 编辑
    handleClickEdit(val) {
      console.log(val);
    },
    // 删除
    handleClickDel(val) {
      console.log(val);
    },
  },
  mounted() {
  },
  created() { }
}
</script>

css

<style lang="scss" >
// element-ui 表格内容居中
.el-table__cell {
  text-align: center !important;
}
// tooltip文字提示的三角形样式颜色修改
// .el-tooltip__popper[x-placement^="方向/top"] .popper__arrow:after
// border-方向-color: #747574 !important;
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: white !important;
}
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
  border-bottom-color: white !important;
}
.testtooltip {
  width: 50%;
}
</style>