vue项目中使用ant-design-vue中a-tabel组件

深碍√TFBOYSˉ_ 2023-07-13 13:52 14阅读 0赞

1，首先安装ant-design-vue：yarn add ant-design-vue

2，在main.js中引入：

import Antd from 'ant-design-vue'

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

Vue.use(Antd)

3，App.vue页面

<template>
      <div id="app">
        <div id="nav">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link>
        </div>
         <transition> 
             <router-view/>
         </transition>
      </div>
    </template>
    
    <style lang="scss">
    .v-enter{ // v-enter：定义进入过渡的开始状态。元素被插入之前生效，在元素被插入之后的下一帧移除 
      transition: all .5s ease;
      transform: translateX(100%);
    }
    .v-leave-to{ // v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态
      transition: all .5s ease;
      opacity: 0;
      transform: translateX(-100%);
      position:absolute;
    }
    .v-leave-active,.v-enter-active{ // v-enter-active：定义进入过渡生效时的状态
                                    // v-leave-active：定义离开过渡生效时的状态
       transition: all .5s ease;
    }
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      overflow-x: hidden;margin:0;
    }
    #nav {
      padding: 30px;
    
      a {
        font-weight: bold;
        color: #2c3e50;
    
        &.router-link-exact-active {
          color: #42b983;
        }
      }
    }
    </style>

HelloWord.vue:

<template>
      <div>
        <template>
          
          <a-table
            :columns="columns"
            :loading="loading"
            bordered
            :dataSource="datas"
            indentSize="10"
            :rowSelection="{onChange:onChange,onSelect:onSelect,onSelectAll:onSelectAll}"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="getThirdPublishChannelOne(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </template>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          loading: false,
          columns: [
            {
              title: "一家之主名字，展开后的是成员名字",
              dataIndex: "name",
              key: "name",
              width: "20%"
            },
            {
              title: "其他资料",
              children: [
                {
                  title: "年龄",
                  dataIndex: "age",
                  key: "age"
                  // sorter: (a, b) => a.age - b.age // 添加此属性可以对年龄进行排序
                },
                {
                  title: "出生地址",
                  children: [
                    {
                      title: "街道",
                      dataIndex: "street",
                      key: "street"
                    },
                    {
                      title: "社区",
                      children: [
                        {
                          title: "单元",
                          dataIndex: "building",
                          key: "building"
                        },
                        {
                          title: "楼层",
                          dataIndex: "number",
                          key: "number"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              title: "目前地址",
              dataIndex: "companyAddress",
              key: "companyAddress"
            },
            {
              title: "操作",
              dataIndex: "action",
              align: "center",
              scopedSlots: { customRender: "action" }
            }
          ],
          datas: []
        };
      },
      created() {
        for (let i = 0; i < 3; i++) {
          this.datas.push({
            key: i,
            name: "李三" + i + "号",
            age: i + 25,
            street: "北京老胡同",
            building: "C",
            number: 2035,
            companyAddress: "四海集团街道",
            companyName: "乾清宫",
            gender: "男",
            children: [
              {
                key: i + 100,
                name: "李三" + i + "号的儿子" + i,
                age: i + 1,
                street: "北京老胡同" + i + "街道",
                building: "C",
                number: i * 2,
                companyAddress: "娃哈哈乳业",
                companyName: "御膳房餐厅",
                gender: "女"
              }
            ]
          });
        }
      },
      methods: {
        getThirdPublishChannelOne(e){},
        handleDelete(e){},
      // 选择的数据改变时触发
        onChange(selectedRowKeys, selectedRows) {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        // 点击每一条数据前面的选择框时触发
        onSelect(record, selected, selectedRows) {
          console.log(
            "record, selected, selectedRows",
            record,
            selected,
            selectedRows
          );
        },
         // 点击表头前面的选择框时触发
        onSelectAll(selected, selectedRows, changeRows) {
          console.log(
            "selected, selectedRows, changeRows",
            selected,
            selectedRows,
            changeRows
          );
        }
      }
    };
    </script>
    <style lang='scss' scoped>
    </style>

router.js：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About', 
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router