Ant Design

Ant Design of React （antd）中的表单form如何设置两个formItem之间的间距？

margin-bottom:24px;

用ant design 的form时候,设置行垂直间距没啥用

magin是透明的,没有颜色,padding是有颜色的

model注意设置z-index

固定侧边栏

:style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"

问题

模板输入框前缀会让字体失效

vue脚手架环境变量添加

安装后脚手架位置:

在命令行中运行以下命令，查找Vue脚手架的安装路径：

shell
npm prefix -g vue-cli

vue antdesign引入全部库

$ vue create antd-demo

并配置项目。

若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。
3. 使用组件

$ npm i --save ant-design-vue@next

main.js

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from "./App";
import 'ant-design-vue/dist/reset.css';
 
const app = createApp(App);
app.config.productionTip = false;
 
 
app.use(Antd).mount('#app');

// 带图标
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from "./App";
import 'ant-design-vue/dist/reset.css';
 
const app = createApp(App);
app.config.productionTip = false;
 
 
 
import * as Icons from '@ant-design/icons-vue';
for (const i in Icons) {
    app.component(i, Icons[i]);
}
app.use(Antd).mount('#app');
 

报错

如果开启了 eslint ，新增 Component 时，报错:

The “EchartsDemo” component has been registered but not used  vue/no-unused-components

解决方法：在 package.json 或 .eslintrc.js （如果存在此文件的话）的eslintConfig下添加：

    "rules": {
      "vue/no-unused-components": "off", // 当存在定义而未使用的组件时，关闭报错
      "no-unused-vars":"off" // 当存在定义而未使用的变量时，关闭报错
    }

插槽

v-slot 有对应的简写 #，因此 <template v-slot:header> 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
 
  <!-- 隐式的默认插槽 -->
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
 
  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

使用 JavaScript 函数来类比可能更有助于你来理解具名插槽：
js
 
// 传入不同的内容给不同名字的插槽
BaseLayout({
  header: `...`,
  default: `...`,
  footer: `...`
})
 
// <BaseLayout> 渲染插槽内容到对应位置
function BaseLayout(slots) {
  return `<div class="container">
      <header>${slots.header}</header>
      <main>${slots.default}</main>
      <footer>${slots.footer}</footer>
    </div>`
}

div添加滚动条

菜鸟教程 -- 学的不仅是技术，更是梦想！！！ 菜鸟教程 -- 学的不仅是技术，更是梦想！！！ 菜鸟教程 -- 学的不仅是技术，更是梦想！！！ 菜鸟教程 -- 学的不仅是技术，更是梦想！！！

表格行点击事件

http://www.hzhcontrols.com/new-1308429.html