Ant-Design-Vue快速上手指南+排坑

一、快速上手指南

1. 安装与配置

• 安装：通过npm安装Ant Design Vue，命令为npm install ant-design-vue --save。
• 引入样式：在项目中使用Ant Design Vue之前，需要引入其样式文件，可以通过import 'ant-design-vue/dist/antd.css';来引入。

2. 使用组件

• 按钮组件（Button）：使用<a-button>标签来创建按钮，可以通过type属性设置按钮的样式（如primary、ghost、dashed等），并通过@click事件监听按钮的点击。

  <template>
    <a-button type="primary" @click="handleClick">点击按钮</a-button>
  </template>
  
  <script>
  import { Button } from 'ant-design-vue';
  
  export default {
    components: {
      'a-button': Button
    },
    methods: {
      handleClick() {
        console.log("按钮被点击了");
      }
    }
  }
  </script>
  

• 表单组件（Form）：使用<a-form>标签来创建表单，表单中的输入框可以使用<a-input>标签来创建。推荐不使用v-model进行双向绑定，而是通过v-decorator进行表单数据的收集和校验。

  <template>
    <a-form ref="form" :model="formData" @submit.prevent="handleSubmit">
      <a-form-item label="用户名" required>
        <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </template>
  
  <script>
  import { Form, Input } from 'ant-design-vue';
  
  export default {
    components: {
      'a-form': Form,
      'a-form-item': Form.Item,
      'a-input': Input
    },
    data() {
      return {
        formData: {}
      };
    },
    methods: {
      handleSubmit() {
        this.$refs.form.validateFields((err, values) => {
          if (!err) {
            console.log('表单提交成功', values);
          }
        });
      }
    }
  }
  </script>
  

• 表格组件（Table）：使用<a-table>标签来创建表格，并通过:columns和:data-source属性分别设置表格的列和数据源。

  <template>
    <a-table :columns="columns" :data-source="data">
      <a-table-column title="用户ID" dataIndex="id" key="id" />
      <a-table-column title="姓名" dataIndex="name" key="name" />
      <!-- 其他列 -->
    </a-table>
  </template>
  
  <script>
  import { Table, TableColumn } from 'ant-design-vue';
  
  export default {
    components: {
      'a-table': Table,
      'a-table-column': TableColumn
    },
    data() {
      return {
        columns: [
          { title: '用户ID', dataIndex: 'id', key: 'id' },
          { title: '姓名', dataIndex: 'name', key: 'name' }
          // 其他列配置
        ],
        data: [
          // 数据源
        ]
      };
    }
  }
  </script>
  

二、排坑指南

1. Table组件对接后台返回数据：

   • 确保Table组件的dataSource格式与后台返回的数据格式一致，可能需要调整分页参数（如pageNo、pageSize等）以匹配后台接口。

2. Table组件操作栏参数问题：

   • 在操作列中，如果需要使用多个数据项，可以不配置dataIndex，而是通过scopedSlots来自定义渲染