antd vue 位置变动 固钉消失_vue搭配antD-Vue开发项目(一)

1、yarn add ant-design-vue

2、yarn add babel-plugin-import

3、babel.config.js文件

module.exports = {

presets: ["@vue/app"],

+ plugins: [

+ [

+ "import",

+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"} //注意官网这里是style:true,这可能会导致报错。建议使用style:"css"

+ ]

+ ]

};

4、src/main.js

import {Button,Switch} from 'ant-design-vue'

Vue.use(Button).use(Switch)

5、使用

哈哈哈

若不想按需加载antd-vue，想一次性全部引入

以上第3步：

将：{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"}

改为：{ libraryName: "Antd", libraryDirectory: "es", style: "css"} //提醒：这里style:"css"可改为style:true且不会报错,这样改后会加载包里的less文件而非css文件。不改也没影响

以上第4步：全部改为

import Antd from 'ant-design-vue';

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

Vue.use(Antd);

然后重启项目即可，请务必重启项目。

antd表格的使用(包括自定义表格列，表格分页，vue中的对象格式与react的不同)

:columns="columns" //2、绑定columns,提醒：columns不仅要自定义，而且之后还需要在data里注册

:dataSource="personList"

bordered

:rowKey="record=>record.pid" //4、表格的每一列必须有一个key值

:pagination="false" //7、不使用表格的分页，分页设置建议单独用分页组件，提高灵活性

>

//6、通过slot='pimg'绑定。通过slot-s