微信小程序版本更新提示

前言

在使用tdesign的table组件的时候，发现内容过长的时候会自动换行，但是有时候我们希望内容尽量能够一行显示，这个时候就需要我们自己来实现了。

实现

计算文本长度代码

// 获取文本长度
export function getTextWidth(text: string, fontSize: number) {
  // 创建临时元素
  const _span = document.createElement('span');
  // 放入文本
  _span.innerText = text;
  // 设置文字大小
  _span.style.fontSize = fontSize + 'px';
  // span元素转块级
  _span.style.position = 'absolute';
  // span放入body中
  document.body.appendChild(_span);
  // 获取span的宽度
  let width = _span.offsetWidth;
  // 从body中删除该span
  document.body.removeChild(_span);
  // 返回span宽度
  return width;
}

组件中使用

<template>
  <div class="mix-table">
    <div style="width: 100%; display: flex">
      <div v-for="item in attach" style="display: flex; flex: 1" class="border">
        <div style="margin-right: 10px">{{ item.title }}：</div>
        <div>{{ item.value }}</div>
      </div>
    </div>
    <t-table
      :columns="newColumns"
      :data="data"
      style="width: 100%"
      :loading="loading"
      :bordered="!isEmpty(data)"
    ></t-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from 'vue';
import { isEmpty, max, min } from 'lodash';
import { getTextWidth } from '@/utils/index';
const props = defineProps<{
  loading: boolean;
  columns: { title: string; colKey: string }[];
  attach: { title: string; value: string }[];
  data: any[];
}>();
const newColumns = ref([]);
watch(
  () => props.data,
  (newVal) => {
    if (!isEmpty(newVal)) {
      newVal.forEach((item) => {
        Object.entries(item).forEach(([key, value]) => {
          const index = newColumns.value.findIndex((citem) => citem.title === key);
          const width = max([getTextWidth(key, 14), getTextWidth((value || '') as string, 14)]) + 34;
          // 不存在
          if (index === -1) {
            newColumns.value.push({
              title: key,
              colKey: key,
              width: width,
            });
          }
          // 存在则比较
          else {
            if (width > newColumns.value[index].width) {
              // 最大取250
              newColumns.value[index].width = min([width, 250]);
            }
          }
        });
      });
      newColumns.value.unshift(newColumns.value.pop());
      newColumns.value.unshift({ colKey: 'serial-number', width: 60, title: '序号' });
    } else {
      newColumns.value = [];
    }
  },
);
</script>
<style>
.mix-table .t-table ::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
</style>
<style scoped>
.border {
  border: 1px solid var(--td-component-border);
  color: var(--td-text-color-placeholder);
  padding: 10px;
}
</style>