如何使用ant-design-vue的Table组件

目录

• 安装脚手架工具
• 使用Vue CLI新建项目
• $slots
• Table组件相关源码

安装脚手架工具

npm install -g @vue/cli

查看@vue/cli版本，vue -V。

使用Vue CLI新建项目

vue create antd-demo

下载ant-design-vue，[email protected]

npm install ant-design-vue@next --save

修改main.js，完整引入ant-design-vue所有组件及样式

import { createApp } from 'vue'
import App from './App.vue'
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
createApp(App).use(Antd).mount('#app')

修改HelloWorld.vue，使用Antd的Table组件

• :columns="columns"，columns是一个数组，用于指定列头
  • dataIndex值依次是：name、age和address，与dataSource每项的name、age和address对应。
  • title，dataIndex值对应的列头名称
    • name，对应的列头名称是姓名
    • age，对应的列头名称是年龄
    • address，对应的列头名称是地址
• key，Vue需要的key，如果已经设置了唯一的dataIndex，可以忽略这个属性
• :dataSource=dataSource，指定数据源
  • dataSource是一个数组
  • 每项的name、age和address，与columns里dataIndex的值：name、age和address相对应

修改HelloWorld.vue，使用Antd的Table组件

注意哈，ant-design-vue Table里:data-source与:dataSource是等效的。

要使用slots自定义样式，就有必要了解下Vue里的$slots和Table组件的源码。

$slots

插槽内容可以在this.$slots中看到，举个例子。

组件base-layout

App.vue

main.js

import { createApp } from 'vue'
import App from './App.vue'
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
createApp(App).use(Antd).mount('#app');

现在我们修改base-layout.vue，使用this.$slots来访问插槽内容。

Table组件相关源码

node_modules/ant-design-vue/es/table/index.js

updateColumns(cols = []) {
  const columns = [];
  const { $slots, $scopedSlots } = this;
  cols.forEach(col => {
    const { slots = {}, scopedSlots = {}, ...restProps } = col;
    const column = {
      ...restProps,
    };
    Object.keys(slots).forEach(key => {
      const name = slots[key];
      if (column[key] === undefined && $slots[name]) {
        column[key] = $slots[name].length === 1 ? $slots[name][0] : $slots[name];
      }
    });
    Object.keys(scopedSlots).forEach(key => {
      const name = scopedSlots[key];
      if (column[key] === undefined && $scopedSlots[name]) {
        column[key] = $scopedSlots[name];
      }
    });
    // if (slotScopeName && $scopedSlots[slotScopeName]) {
    //   column.customRender = column.customRender || $scopedSlots[slotScopeName]
    // }
    if (col.children) {
      column.children = this.updateColumns(column.children);
    }
    columns.push(column);
  });
  return columns;
}

只有满足条件(column[key] === undefined && $slots[name])，才能使用作用域插槽来自定义表头。本例中，dataIndex:'name'想自定义表头，所以不能定义title属性，而是在slots属性中定义了title属性。

node_modules/ant-design-vue/es/vc-table/src/TableCell.js

render() {
  const {
    record,
    indentSize,
    prefixCls,
    indent,
    index,
    expandIcon,
    column,
    component: BodyCell,
  } = this;
  const { dataIndex, customRender, className = '' } = column;
  const { transformCellText } = this.table;
  // We should return undefined if no dataIndex is specified, but in order to
  // be compatible with object-path's behavior, we return the record object instead.
  let text;
  if (typeof dataIndex === 'number') {
    text = get(record, dataIndex);
  } else if (!dataIndex || dataIndex.length === 0) {
    text = record;
  } else {
    text = get(record, dataIndex);
  }
  let tdProps = {
    props: {},
    attrs: {},
    on: {
      click: this.handleClick,
    },
  };
  let colSpan;
  let rowSpan;
  if (customRender) {
    text = customRender(text, record, index, column);
    if (isInvalidRenderCellText(text)) {
      tdProps.attrs = text.attrs || {};
      tdProps.props = text.props || {};
      tdProps.class = text.class;
      tdProps.style = text.style;
      colSpan = tdProps.attrs.colSpan;
      rowSpan = tdProps.attrs.rowSpan;
      text = text.children;
    }
  }
  if (column.customCell) {
    tdProps = mergeProps(tdProps, column.customCell(record, index));
  }
  // Fix https://github.com/ant-design/ant-design/issues/1202
  if (isInvalidRenderCellText(text)) {
    text = null;
  }
  if (transformCellText) {
    text = transformCellText({ text, column, record, index });
  }
  const indentText = expandIcon ? (
    
  ) : null;
  if (rowSpan === 0 || colSpan === 0) {
    return null;
  }
  if (column.align) {
    tdProps.style = { textAlign: column.align, ...tdProps.style };
  }
  const cellClassName = classNames(className, column.class, {
    [`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,
    // 如果有宽度，增加断行处理
    // https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241
    [`${prefixCls}-cell-break-word`]: !!column.width,
  });
  if (column.ellipsis) {
    if (typeof text === 'string') {
      tdProps.attrs.title = text;
    } else if (text) {
      // const { props: textProps } = text;
      // if (textProps && textProps.children && typeof textProps.children === 'string') {
      //   tdProps.attrs.title = textProps.children;
      // }
    }
  }
  return (
    
      {indentText}
      {expandIcon}
      {text}
    
  );
}

其中，customRender是渲染函数，用来对表中的值进行自定义渲染。该函数接受4个参数，分别是 text、 record、index和 column。

antd官网也有customRender的相关说明，如下

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。