Vue element-ui中 table表格过长内容隐藏显示

在Vue中使用element-ui的Table组件时，如果需要隐藏过长的内容并提供一个展开按钮来显示更多信息，可以使用Table组件的自定义列模板（scoped slot）来实现。

以下是一个简单的示例，展示如何隐藏表格内容并通过按钮展示更多信息：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="详细信息">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top" :content="scope.row.description">
          <p slot="reference" :title="scope.row.description">
            {{ scope.row.description.length > 10 ? scope.row.description.slice(0, 10) + '...' : scope.row.description }}
          </p>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          description: '这是一段很长的描述文本，将会被隐藏，并且当鼠标悬停时显示完整内容。'
        },
        // ... 更多数据
      ]
    };
  }
};
</script>

在这个例子中，我们使用了el-popover组件来在鼠标悬停时显示完整的内容，并且表格中的description字段如果长度超过10个字符，则会被截断并在末尾添加省略号。通过slot="reference"我们指定了引用的元素，即包含截断内容的<p>标签。当用户将鼠标悬停在此标签上时，会通过el-popover显示完整的描述信息。