vue2 ant的a-table组件

叽里呱啦_711

已于 2022-11-30 22:04:48 修改

阅读量1.4k

点赞数

分类专栏： vue 文章标签： css html css3

于 2022-11-30 22:04:15 首次发布

本文链接：https://blog.csdn.net/m0_46678809/article/details/128123405

版权

本文详细介绍了如何在Vue2项目中集成并使用Ant Design的A-Table组件，包括基本配置、数据绑定、列定义、操作列、筛选与排序等功能的实现，同时探讨了与CSS和HTML的配合，以及CSS3新特性在美化表格中的应用。

摘要由CSDN通过智能技术生成

<template>

  <div>

    <div class="box" style="width:600px;margin:50px">

      <a-table

        :dataSource="tableList"

        :columns="tableColumns"

        bordered

        :pagination="false"

    1
      >

        <template slot="selfDefineTitle">

          <span>修后的标题(姓名列)</span>

        </template>

        <template slot="dealAge" slot-scope="text, record, index">

          <!-- 默认有三个参数，text为传给该列每个单元格中的数据，record为每一行的数据，index为改行索引 -->

          <span>{
  { index + '-' + '年龄为：' + text }}</span>

        </template>

      </a-table>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {
      tableList: [

        {

          id: 1,

          name: '张三'