uniapp 中table 封装 表格实现内容超过多使用...显示，鼠标或手指移上去通过弹框显示

在Uniapp中，我们可以通过封装自定义组件来实现表格的功能增强，例如表格中内容超过多时的弹框显示。下面是一个封装表格组件的示例代码：

<template>
  <view>
    <u-table :data="tableData">
      <u-table-column v-for="column in columns" :title="column.title" :field="column.field" :width="column.width">
        <template slot-scope="{ row }">
          <span class="show-popup" :class="column.className" @click="showPopup(row, column.field)">{{ row[column.field] }}</span>
        </template>
      </u-table-column>
    </u-table>
    <u-popup v-model="popupVisible">
      <view>{{ popupContent }}</view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    columns: { // 表格列定义，例如：[{ title: '姓名', field: 'name', width: 100, className: 'name-column' }]
      type: Array,
      default: () => [],
    },
    data: { // 表格数据，例如：[{ name: '张三', age: 20, address: '北京市海淀区' }, ...]
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      popupVisible: false,
      popupContent: '',
    };
  },
  methods: {
    showPopup(row, field) {
      this.popupContent = row[field];
      this.popupVisible = true;
    },
  },
};
</script>

<style>
.show-popup {
  display: inline-block;
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>

在上面的示例中，我们定义了一个`Table`组件，通过`props`传入表格的列定义和数据，并在模板中使用`u-table`和`u-table-column`组件来展示表格。在表格的单元格中，我们使用`span`标签来展示单元格的内容，并添加了一个`show-popup`类名和列定义中的`className`属性，用于样式控制和事件绑定。当用户点击单元格时，会触发`showPopup`方法，该方法将弹框的内容设置为当前行的对应列的内容，并将`popupVisible`设置为`true`，从而显示弹框。在弹框显示时，用户可以通过点击弹框外部或弹框上的关闭按钮来关闭弹框。

使用时，在父组件中引入`Table`组件并传入列定义和数据即可：

<template>
  <view>
    <table :columns="columns" :data="data"></table>
  </view>
</template>

<script>
import Table from '@/components/Table.vue';

export default {
  components: { Table },
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 100, className: 'name-column' },
        { title: '年龄', field: 'age', width: 100, className: 'age-column' },
        { title: '地址', field: 'address', width: 200, className: 'address-column' },
      ],
      data: [
        { name: '张三', age: 20, address: '北京市海淀区' },
        { name: '李四', age: 25, address: '上海市浦东新区' },
        { name: '王五', age: 30, address: '深圳市南山区' },
      ],
    };
  },
};
</script>