Vue Ant Design Vue table customCell 设置单元格属性（带斑马纹） - 附完整示例

效果

一、介绍

1、官方文档

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsAn enterprise-class UI components based on Ant Design and Vuehttps://3x.antdv.com/components/table-cn#API

2、官方示例

二、准备工作

1、安装依赖包

# 选择一个你喜欢的包管理器

# NPM
$npm install ant-design-vue --save

#Yarn
$ yarn add ant-design-vue

注：也可以在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

2、示例版本

"ant-design-vue": "^3.2.12",

三、使用步骤

1、在main.ts引入

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

app.use(Antd);

2、具体使用

  function handleData(data) {
    // 处理返回的 dataList
    dataList.value = data.dataList;

    // 保存异常数据
    warningData.value = data.warning || [];

    // 处理返回的 columns
    data.columns.forEach((v, columnIndex) => {
      v.align = 'center';

      // 使用 customCell 替代 customRender
      v.customCell = (record, rowIndex) => {
        return {
          class: shouldWarn(record, rowIndex, columnIndex) ? 'warning-cell' : '',
        };
      };

      // 更新组件状态
      columns.value = data.columns;
    })
  }

  handleData(defaultData);

  function shouldWarn(record, rowIndex, columnIndex) {
    const isWarning = warningData.value.some((warn) => {
      return warn.index === columnIndex && warn.row === rowIndex;
    });
    return isWarning;
  }

四、完整示例

1、main.ts

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App);
app.use(Antd);
app.mount("#app");

2、example.vue