Ant Design 还有react版本的

element —ui和Ant Design of Vue —UI类似
element的研发团队解散了，不在更新维护。

ui界面设计，把一些界面内容（样式）统一提供
地址：https://www.antdv.com/components/layout-cn/

支持环境

  • 现代浏览器和 IE9 及以上（需要 polyfills）。
  • 支持服务端渲染。
  • Electron

    安装

    vue-cli2 ```javascript npm i —save ant-design-vue

npm install ant-design-vue@1.7.8

  1. <a name="iGr7n"></a>
  2. # 使用
  3. <a name="ltYsd"></a>
  4. ## 注册
  5. ```javascript
  6. import Vue from 'vue'
  7. import App from './App.vue'
  8. import router from './router'
  9. import store from './store'
  10. // 引入ui库
  11. import Antd from 'ant-design-vue';
  12. // 引入ui库的样式
  13. import 'ant-design-vue/dist/antd.css';
  15. Vue.config.productionTip = false
  17. // 将Antd注册成组件
  18. Vue.use(Antd)
  20. new Vue({
  21.   router,
  22.   store,
  23.   render: h => h(App)
  24. }).$mount('#app')

主要代码

  1. <template>
  2.   <a-layout id="components-layout-demo-custom-trigger">
  3.     <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
  4.         <div class="logo" :style="{fontSize:style}">财猫双犬</div>
  5.         <a-menu
  6.           class="a-emnu-back"
  7.           mode="inline"
  8.           :default-selected-keys="['1']" //当前被选中的选项卡
  9.           :default-open-keys="['sub1']" // 更具key关键字展开或折叠选项卡
  10.           :style="{ height: '100%', borderRight: 0 }"
  11.         >
  12.           <a-sub-menu key="sub1">
  13.             <span slot="title"><a-icon type="user" /><i class="show" v-show="!collapsed">系统账号管理</i></span>
  14.             <a-menu-item key="1">
  15.               平台账号管理
  16.             </a-menu-item>
  17.             <a-menu-item key="2">
  18.               角色管理
  19.             </a-menu-item>
  20.             <a-menu-item key="3">
  21.               权限列表
  22.             </a-menu-item>
  23.             <a-menu-item key="4">
  24.               部门列表
  25.             </a-menu-item>
  26.           </a-sub-menu>
  27.           <a-sub-menu key="sub2">
  28.             <span slot="title"><a-icon type="laptop" /><i class="show" v-show="!collapsed">用户管理</i></span>
  29.             <a-menu-item key="5">
  30.               option5
  31.             </a-menu-item>
  32.             <a-menu-item key="6">
  33.               option6
  34.             </a-menu-item>
  35.             <a-menu-item key="7">
  36.               option7
  37.             </a-menu-item>
  38.             <a-menu-item key="8">
  39.               option8
  40.             </a-menu-item>
  41.           </a-sub-menu>
  42.           <a-sub-menu key="sub3">
  43.             <span slot="title"><a-icon type="notification" /><i class="show" v-show="!collapsed">圈子管理</i></span>
  44.             <a-menu-item key="9" >
  45.               option9
  46.             </a-menu-item>
  47.             <a-menu-item key="10">
  48.               option10
  49.             </a-menu-item>
  50.             <a-menu-item key="11">
  51.               option11
  52.             </a-menu-item>
  53.             <a-menu-item key="12">
  54.               option12
  55.             </a-menu-item>
  56.           </a-sub-menu>
  57.         </a-menu>
  58.       </a-layout-sider>
  59.     <a-layout>
  60.       <a-layout-header style="background: #fff; padding: 0">
  61.         <a-icon
  62.           class="trigger"
  63.           :type="collapsed ? 'menu-unfold' : 'menu-fold'"
  64.           @click="change"
  65.         />
  66.       </a-layout-header>
  67.       <a-breadcrumb class="a-breadcrumb-title" style="margin: 16px 0">
  68.           <a-breadcrumb-item style="fontSize: 20px">Home</a-breadcrumb-item>
  69.           <a-breadcrumb-item style="fontSize: 18px">List</a-breadcrumb-item>
  70.           <a-breadcrumb-item>App</a-breadcrumb-item>
  71.         </a-breadcrumb>
  72.       <a-layout-content
  73.         :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
  74.       >
  75.         <div class="a-layout-content-search-box">
  76.           <input placeholder="支持搜索用户名/姓名/手机号" />
  77.           <span class="a-layout-content-search">搜索</span>
  78.           <span class="a-dropdown-span">账号类型</span>
  79.           <a-dropdown class="a-dropdown">
  80.             <a class="ant-dropdown-link" @click="e => e.preventDefault()">
  81.               全部 <a-icon type="down" />
  82.             </a>
  83.             <a-menu slot="overlay">
  84.               <a-menu-item>
  85.                 <a href="javascript:;">全部</a>
  86.               </a-menu-item>
  87.               <a-menu-item>
  88.                 <a href="javascript:;">2nd menu item</a>
  89.               </a-menu-item>
  90.               <a-menu-item>
  91.                 <a href="javascript:;">3rd menu item</a>
  92.               </a-menu-item>
  93.             </a-menu>
  94.           </a-dropdown>
  95.         </div>
  96.         <div class="a-button-account">
  97.            <a-button type="primary">
  98.             添加账户
  99.           </a-button>
  100.         </div>
  101.         <a-table :columns="columns" :data-source="data">
  102.           <!-- slot与columns中ID这一列中的slots匹配 -->
  103.           <span slot="customTitle"><a-icon type="smile-o" /> ID</span>
  104.           <!-- 通过slot与columns中的scopedSlots中的属性 customRender 设置相同值，以此来达成绑定 -->
  105.           <!-- 绑定后就可以通过slot-scope来定义数据， 变量1--当前数据 变量2--总数据 变量3--索引-->
  106.           <!-- <span slot="username" slot-scope="test,record,index">{{test}}--{{record}}--{{index}}</span> -->
  107.           <span slot="username" slot-scope="test">{{test}}</span>
  108.           <!-- 如果不需要通过scopedSlots中的属性 customRender来设置复杂数据，可以不用写对应的列标签，如下 -->
  109.           <!-- 即只需要为特殊的数据列写一个标签，用与设置数据，其余不用管也可以显示数据 -->
  110.           <!-- <span slot="name"></span>
  111.           <span slot="role"></span>
  112.           <span slot="sub"></span>
  113.           <span slot="phone"></span>
  114.           <span slot="state"></span>
  115.           <span slot="createdata"></span>-->
  116.           <!-- dataIndex: 'key',scopedSlots: { customRender: 'key' } 这两个都设置为key时-->
  117.           <!-- 可以通过slot-scope获取到key的值了 -->
  118.           <button slot="key" slot-scope="index">删除{{index}}</button> 
  119.         </a-table>
  120.       </a-layout-content>
  121.     </a-layout>
  122.   </a-layout>
  123. </template>
  124. <script>
  125. // colums中每一个对象代表一列，也只渲染这一列
  126. // title代表表头信息
  127. // scopedSlots用来渲染复杂数据，在上面的标签中通过给slot输入一个与customRender值相同的数据来绑定对应列
  128. const columns = [
  129.   {
  130.     // dataIndex对应数据中，ID那一列的数据
  131.     dataIndex: 'ID',
  132.     key: 'ID',
  133.     // 通过slots设置title时，上面又将slot的值设置为slots中的title一样，这样就可以通过这样的设置给这一列的标题添加一些图标等
  134.     slots: { title: 'customTitle' },
  135.     // title:'ID',
  136.     // scopedSlots: { customRender: 'ID' },
  137.   },
  138.   {
  139.     // 当未写dataIndex时，如果有scopedSlots，那么显示的数据将会是当前所有数据
  140.     title: '用户名',
  141.     dataIndex: 'username',
  142.     key: 'username',
  143.     scopedSlots: { customRender: 'username' },
  144.   },
  145.   {
  146.     title: '姓名',
  147.     dataIndex: 'name',
  148.     key: 'name',
  149.   },
  150.   {
  151.     title: '角色',
  152.     key: 'role',
  153.     dataIndex: 'role',
  154.     // scopedSlots: { customRender: 'role' },
  155.   },
  156.   {
  157.     title: '部门',
  158.     key: 'sub',
  159.     dataIndex: 'sub',
  160.     // scopedSlots: { customRender: 'sub' },
  161.   },
  162.   {
  163.     title: '手机号',
  164.     key: 'phone',
  165.     dataIndex: 'phone',
  166.     // scopedSlots: { customRender: 'phone' },
  167.   },
  168.   {
  169.     title: '部门',
  170.     dataIndex: 'state',
  171.     key: 'state',
  172.   },
  173.   {
  174.     title: '创建时间',
  175.     dataIndex: 'createdata',
  176.     key: 'createdata',
  177.   },
  178.   {
  179.     title: '操作',
  180.     key: 'control',
  181.     dataIndex: 'key',
  182.     scopedSlots: { customRender: 'key' },
  183.   }
  184. ];
  186. const data = [
  187.   {
  188.     key: '1',
  189.     ID:1,
  190.     username:'zhangsan',
  191.     name: '张三',
  192.     role: 'people',
  193.     sub: '英雄联盟',
  194.     phone: 136546548,
  195.     state:'hb（￣▽￣）d　',
  196.     createdata:'2022.3.24',
  197.   },
  198.   {
  199.     key: '2',
  200.     ID:2,
  201.     username:'zhangsan',
  202.     name: '张三',
  203.     role: 'people',
  204.     sub: '英雄联盟',
  205.     phone: 136546548,
  206.     state:'hb（￣▽￣）d　',
  207.     createdata:'2022.3.24',
  208.   },
  209.   {
  210.     key: '3',
  211.     ID:3,
  212.     username:'zhangsan',
  213.     name: '张三',
  214.     role: 'people',
  215.     sub: '英雄联盟',
  216.     phone: 136546548,
  217.     state:'hb（￣▽￣）d　',
  218.     createdata:'2022.3.24',
  219.   },
  220. ];
  221. export default {
  223.   data() {
  224.     return {
  225.       collapsed: false,
  226.       style:'20px',
  227.       data,
  228.       columns,
  229.     };
  230.   },
  231.   methods:{
  232.     change(){
  233.       this.collapsed = !this.collapsed;
  234.       if(this.style === '20px'){
  235.         this.style = '12px'
  236.       }else{
  237.         this.style = '20px'
  238.       }
  239.     }
  240.   }
  241. }
  242. </script>
  243. <style>
  244. #components-layout-demo-custom-trigger .trigger {
  245.   font-size: 18px;
  246.   line-height: 64px;
  247.   padding: 0 24px;
  248.   cursor: pointer;
  249.   transition: color 0.3s;
  250. }
  252. #components-layout-demo-custom-trigger .trigger:hover {
  253.   color: #1890ff;
  254. }
  256. #components-layout-demo-custom-trigger .logo {
  257.   height: 32px;
  258.   background: rgba(255, 255, 255, 0.2);
  259.   margin: 16px;
  260.   text-align: center;
  261.   color: #FFf;
  262.   line-height: 32px;
  263.   font-weight: bold;
  264.   font-size: 20px;
  265. }
  267. #components-layout-demo-custom-trigger .show {
  268.   text-overflow: ellipsis;
  269. }
  271. #components-layout-demo-custom-trigger .a-breadcrumb-title {
  272.   padding-left: 24px;
  273. }
  275. #components-layout-demo-custom-trigger .a-layout-content-search-box {
  276.   display: flex;
  277.   cursor: pointer;
  278. }
  280. #components-layout-demo-custom-trigger .a-layout-content-search-box input {
  281.   width: 350px;
  282.   height: 30px;
  283.   border-radius: 15px;
  284.   padding: 5px 35px;
  285.   box-sizing: border-box;
  286.   outline: none;
  287.   border: none;
  288.   background-color: #F0F2F5;
  289.   margin-right: 20px;
  290. }
  293. #components-layout-demo-custom-trigger .a-layout-content-search-box .a-layout-content-search {
  294.   color: #1890ff;
  295.   line-height: 30px;
  296. }
  298. #components-layout-demo-custom-trigger .a-layout-content-search-box .a-dropdown {
  299.   position: relative;
  300.   right: -50%;
  301.   top: 0;
  302.   display: flex;
  303.   align-items: center;
  304.   color: #333;
  305. }
  307. #components-layout-demo-custom-trigger .a-layout-content-search-box .a-dropdown-span {
  308.   position: relative;
  309.   right: -48%;
  310.   top: 0;
  311.   display: flex;
  312.   align-items: center;
  313. }
  315. #components-layout-demo-custom-trigger .a-layout-content-search-box + .a-button-account {
  316.   margin: 20px;
  317. }
  318. </style>