ant design vue 组件库使用问题汇总

主要介绍了 ant design vue 1.x 版本使用时的一些问题以及解决方式，例如 ant design label 标签左右对齐显示、ant design table 操作栏高度不对齐问题、ant-table 自定义表格内容处理等等

因为这个是旧项目的维护，项目使用的是 ant design vue 1.x 版本，比较古早了。

1. ant design label 标签左右对齐显示

问题描述：label 标签的文字可能是 2 为、3 位或 4 位，需要对齐的话，中间需要加空格

问题解决：使用\xa0\xa0进行填充

html 复制代码

<a-form-item label="截止时间"></a-form-item>
<a-form-item :label="`图\xa0\xa0\xa0\xa0\xa0\xa0\xa0书`"</a-form-item>

优化后的效果如下所示：

1.1 文字两端对齐

项目中这种需求还是挺常见的，需要将文字两端对齐，中间间距空着，而文字的数量不是一样的

html 复制代码

<div class="wrap">
  <div class="txt">雪天</div>
  <div class="txt">下雪天</div>
  <div class="txt">下暴雪天</div>
</div>

<style>
  .wrap .txt {
    width: 100px;
    text-align: justify; // 元素内的文本内容两端对齐，即文本会均匀分布在元素的宽度内。
    text-align-last: justify; // 兼容旧版本的IE浏览器，它会使元素内的文本内容的最后一行也两端对齐
  }
</style>

2. ant design table 操作栏高度不对齐问题

问题描述：使用 ant-table 组件时，操作栏的高度和其他栏的高度不一致，导致错位显示了。

问题分析：表格中有一栏"封面"的内容是自定义的，高度没有固定，根据数据来显示图片内容；表格渲染时，可能还没数据，导致操作栏高度无法确定，使用了默认的高度。

问题解决：固定栏目高度，保证一致性，以保持操作栏和表格内容在同一行对齐。

html 复制代码

// 修改前：没有确定内容高度
<div slot="coverTemplate" slot-scope="{ data }">
  <img
    :src="data.cover_image_url"
    style="width: 40px;"
    v-viewImage="[data.cover_image_url]"
  />
</div>

// 修改后：确定内容高度，保证渲染一致
<div slot="coverTemplate" slot-scope="{ data }" style="height:56px;">
  <img
    v-if="data.cover_image_url"
    :src="data.cover_image_url"
    style="width: 40px;height:56px;"
    v-viewImage="[data.cover_image_url]"
  />
</div>

表格操作栏错位效果如下：

3. ant-table 自定义表格内容

使用customRender实现

js 复制代码

const tableColumns = [
  {
    title: "首页展示",
    dataIndex: "show_home",
    // 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引
    customRender: (text, record, index) => {
      return text === 1 ? "是" : "否";
    },
    width: 150,
  },
];

使用scopedSlots实现

js 复制代码

// 定义数据
const tableColumns = [
  {
    title: "首页展示",
    dataIndex: "show_home",
    // 插槽形式处理
    scopedSlots: {
      customRender: "showTmp",
    },
    width: 150,
  },
];

html 复制代码

// 使用插槽实现
<div slot="showTmp" slot-scope="{ text, record }">
  // 自定义开关按钮，效果如下图所示：
  <a-switch
    :disabled="record.status"
    :checked="text === 1"
    checked-children="是"
    un-checked-children="否"
    @change="(checked) => onShowHomeChange(record, checked)"
  />
</div>

4. 生成空白gif动画

之前在介绍 electron 打包项目时，需要生成空白的 gif 替换过渡动画，如下为详细代码：

js 复制代码

// 创建一个尺寸为 1x1 像素的画布
const canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
const context = canvas.getContext("2d");

// 绘制一张完全透明的图片
context.clearRect(0, 0, 1, 1);

// 将画布内容保存为 GIF 格式的图片文件
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "blank.gif";
  link.click();
  URL.revokeObjectURL(url);
});