Vue Ant Design Vue table customRow + rowClassName 设置行属性 + 表格行的类名（带斑马纹和默认选中第一条数据） - 附完整示例

目录

效果

一、介绍

1、官方文档

2、官方示例

二、准备工作

1、安装依赖包

2、示例版本

三、使用步骤

1、在main.ts引入

2、具体使用

四、完整示例

1、main.ts

2、example.vue

 欢迎扫描下方二维码关注VX公众号

---

效果

一、介绍

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 rowProperties(record, index) {
    return {
      record,
      onClick: (event) => {
        clickRow(record);
      },
    };
  }

  function clickRow(record) {
    selectedRecord.value = record;
  }

  // 表格行的类名 保存的行和选中行如果一致，就返回该样式
  function setRowClassName(record, index) {
    return record.name === selectedRecord.value.name ? 'clicked-row' : (index % 2 === 1) ? 
    'table-striped' : null;
  }

四、完整示例

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

<template>
  <a-table
    :columns="columns"
    :data-source="tableData"
    :customRow="rowProperties"
    :rowClassName="setRowClassName"
    bordered
    size="small"/>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '身高',
      dataIndex: 'height', 
      ellipsis: true,
    },
    {
      title: '体重',
      dataIndex: 'weight',
      ellipsis: true,
    },
  ];
  const tableData = ref<any>([
    {
      key: '1',
      name: '张三',
      height: 180,
      weight: 165,
    },
    {
      key: '2',
      name: '李四',
      height: 178,
      weight: 146,
    },
    {
      key: '3',
      name: '王五',
      height: 182,
      weight: 168,
    },
    {
      key: '4',
      name: '赵六',
      height: 185,
      weight: 160,
    },
    {
      key: '5',
      name: '孙七',
      height: 176,
      weight: 140,
    },
    {
      key: '6',
      name: '周八',
      height: 183,
      weight: 176,
    },
    {
      key: '7',
      name: '吴九',
      height: 177,
      weight: 148,
    },
    {
      key: '8',
      name: '郑十',
      height: 180,
      weight: 150,
    },
  ]);

  const selectedRecord = ref({});

  // 设置行属性
  function rowProperties(record, index) {
    return {
      record,
      onClick: (event) => {
        clickRow(record);
      },
    };
  }

  function clickRow(record) {
    selectedRecord.value = record;
  }

  // 表格行的类名 保存的行和选中行如果一致，就返回该样式
  function setRowClassName(record, index) {
    return record.name === selectedRecord.value.name ? 'clicked-row' : (index % 2 === 1) ? 'table-striped' : null;
  }

  if (tableData.value.length > 0) clickRow(tableData.value[0]);

</script>

<style scoped>
  :deep() .ant-table-cell {
    text-align: center !important;
  }
  
  :deep() .ant-table-pagination.ant-pagination {
    margin: 10px 0 0 0 !important;
  }
  
  :deep() .clicked-row {
    background-color: #0e8f8f;
  }
  :deep() .table-striped {
    background-color: #fafafa !important;
  }
</style>

分页相关配置示例

Vue Ant Design Vue table pagination - 表格分页-CSDN博客

 欢迎扫描下方二维码关注VX公众号