简介

Ant Design of Vue

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
Ant-Design-Vue - 图1 + Ant-Design-Vue - 图2

特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Vue 组件。
  • 共享Ant Design of React设计工具体系。

支持环境

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

表单校验

只允许输入数字

需求：若用户输入非数字，则直接替换为空

  1. <a-form-item label="手机号">
  2.   <a-input
  3.            v-show="tag !== 2"
  4.            v-decorator="[
  5.                         'driver_tel',
  6.                         {
  7.                         rules: [{ required: true, message: '请输入手机号!' }]
  8.                         }
  9.                         ]"
  10.            placeholder="请输入"
  11.            oninput="value=value.replace(/[^\d]/g,'')"
  12.            />
  13. </a-form-item>

改变校验子节点的时机

options.validateTrigger 校验子节点值的时机 string|string[] ‘change’、’onBlur’

image.png

样式覆盖

checkBox🇭🇰相关

  1. .ant-checkbox-wrapper:hover .ant-checkbox-inner,
  2. .ant-checkbox:hover .ant-checkbox-inner, 
  3. .ant-checkbox-input:focus + .ant-checkbox-inner{
  4.    border: 1px solid #1BBA79 !important;
  5. }

修改选中时多选框样式：

  1. .ant-checkbox-checked .ant-checkbox-inner,
  2. .ant-checkbox-indeterminate .ant-checkbox-inner {
  3.   background-color: transparent;
  4.   border: 1px solid #1BBA79;
  5. }

修改多选框默认样式：

  1. .ant-checkbox{
  2.   .ant-checkbox-inner{
  3.     border: 1px solid #1BBA79;
  4.     background-color: transparent;
  5.   }
  6. }

修改多选框中全选按钮的样式，或去除样式

  1. /deep/.ant-checkbox-indeterminate {
  2.   // background-color: red !important;
  3.   // color: red !important;
  4. }
  5. // 用来改变未能全选时，而附加在全选按钮的色块
  6. /deep/.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  7.   background-color #ffffff !important;
  8. }

如图：
image.png

table🇭🇰相关

修改表格鼠标悬浮样式hover

  1. /deep/.ant-checkbox-checked .ant-checkbox-inner,
  2. .ant-checkbox-indeterminate .ant-checkbox-inner {
  3.   background-color: #2176FF !important;
  4.   border: 1px solid #2176FF !important;
  5. }
  6. /deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
  7.  background-color: #e8f1ff!important;
  8. }
  9. /deep/.ant-table-body .ant-table-row-hover{
  10.  background: #e8f1ff!important;
  11. }
  12. /deep/.ant-table-body .ant-table-row-hover > td {
  13.  background: #e8f1ff!important;
  14. }
  15. /deep/.ant-divider-vertical {
  16.   margin 0 20px
  17.   height 1.3em
  18. }

自定义标题及内容插槽slot

  1.   {
  2.     // title: '标准编号' + '' + '厂商编号',
  3.     key: 'code',
  4.     width: 100,
  5.     // scopedSlots: { customRender: 'code' },
  6.     scopedSlots: { title: 'code_title', customRender: 'code' },
  7.     align: 'center'
  8.   }
  1.  <!-- 标准编号|厂商编号 -->
  2. <span slot="code" slot-scope="record" style="display:flex; flex-direction: column;">
  3.   <span class="item-code">
  4.     {{ record.code | filterShow }}
  5.   </span>
  6.   <span class="item-code">
  7.     {{ record.sn | filterShow }}
  8.   </span>
  9. </span>
  10. <span slot="code_title" style="display: flex; flex-direction: column">
  11.   <span>标准编号</span>
  12.   <span>厂商编号</span>
  13. </span>

根据条件使勾选框禁用

image.png

  1.  /**
  2.   * 判断商品已添加，不可添加
  3.   */
  4. getCheckboxProps (record) {
  5.   return {
  6.     props: {
  7.       disabled: record.is_exist === 1
  8.     }
  9.   }
  10. },

组件使用

Select🇨🇳选择器


搜索值默认为value的问题解决方法

a-select、a-tree-select 默认使用了value进行搜索
我们会发现，a-tree-select搜索时候搜的是value，由于传入值一般都是id类型，用户不可能去搜索id，导致发生此问题

image.png
在a-select中可以通过设置：
image.png

  1. option-label-prop="label"
  2. option-filter-prop="label"
  1.  <a-form-item label="商品类型:">
  2.    <a-select
  3.              v-decorator="['type']"
  4.              mode="default"
  5.              style="width: 200px"
  6.              :allow-clear="true"
  7.              placeholder="请选择商品类型"
  8.              show-search
  9.              option-label-prop="label"
  10.              option-filter-prop="label"
  11.              @change="handleChangeGoodsBrand"
  12.              >
  13.      <a-select-option
  14.                       v-for="(goodsType,
  15.                              goodsTypeIndex) in goods_type_list"
  16.                       :key="goodsTypeIndex"
  17.                       :value="goodsType.key"
  18.                       :label="goodsType.value"
  19.                       >
  20.        {{ goodsType.value }}
  21.      </a-select-option>
  22.    </a-select>
  23. </a-form-item>

TreeSelect选择器

搜索值默认为value的问题解决方法

a-tree-select默认使用了value进行搜索
我们会发现，a-tree-select搜索时候搜的是value，由于传入值一般都是id类型，用户不可能去搜索id，导致发生此问题。
默认：

  1. title：显示值
  2. value：搜索值（不能重复）、提交时候的传输值。
  3. key：区分值（不能重复）

示例：【传入的json串示例】

  1. const treeData = [
  2.     {
  3.       title: '满意度',
  4.       value: '0-0',
  5.       key: '0-0',
  6.       disabled: true,
  7.       children: [
  8.         {
  9.           title: "工作满意度",
  10.           value: '0-0-1',
  11.           key: '0-0-1',
  12.         },
  13.         {
  14.           title: '生活满意度',
  15.           value: '0-0-1',
  16.           key: '0-0-2',
  17.           // disabled: true,
  18.         },
  19.       ],
  20.     }
  21.  ]

解决方法：
image.png
image.png
在标签中加入：tree-node-filter-prop="title"
示例：

  1. <a-tree-select
  2.                v-model="form.tags"
  3.                style="width: 100%"
  4.                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  5.                allow-clear
  6.                multiple
  7.                :tree-data="tagsData"
  8.                placeholder="请选择"
  9.                tree-default-expand-all
  10.                tree-node-filter-prop="title"
  11.                >
  12.    <span slot="checkboxTitle" slot-scope="record">
  13.      {{ record.permission_name }}
  14.    </span>
  15.    <span slot="checkbox" slot-scope="record">
  16.      {{ record.permission_name }}
  17.    </span>
  18. </a-tree-select>

Table表格

自定义头部标题栏

  1. {
  2.   width: 90,
  3.   key: 'action',
  4.   scopedSlots: { title: 'checkboxTitle', customRender: 'checkbox' }
  5.   // align: 'left'
  6. },

Table组件的column添加鼠标悬浮提示

  1. columns:[
  2.   {
  3.     title: 'name',
  4.     dataIndex: 'name',
  5.     key: 'name',
  6.     ellipsis:true
  7.   },
  8.   {
  9.     title: 'Age',
  10.     dataIndex: 'age',
  11.     key: 'age',
  12.     ellipsis:true
  13.   },
  14.   {
  15.     title: 'Address',
  16.     dataIndex: 'address',
  17.     key: 'address',
  18.     ellipsis:true  // 用于省略...
  19.   },
  20. ]
  1. this.$nextTick(()=>{
  2.    let rowsDom = document.getElementsByClassName("ant-table-row-cell-break-word");
  3.    rowsDom = Array.from(rowsDom)
  4.    rowsDom.forEach(item1=>{
  5.        if(item1.nodeName === "TD"){
  6.           item1.setAttribute("title",item1.textContent)
  7.        }
  8.    })
  10.    var tableHeadDom = document.getElementsByClassName("ant-table-thead");
  11.    var colsDom = tableHeadDom[0].getElementsByClassName("ant-table-row-cell-ellipsis");
  12.    colsDom.forEach(item=>{
  13.        item.setAttribute("title",item.textContent)
  14.    })
  15. })

表格行排序拖动

  1. <a-table id="mytb"></a-table>
  1. initSortable () {
  2.   const mytb = document.querySelector('#mytb tbody')
  3.   const that = this
  4.   // eslint-disable-next-line no-new
  5.   new Sortable(mytb, {
  6.     handle: '.ant-table-row',
  7.     animation: 150,
  8.     ghostClass: 'blue-background-class',
  9.     sort: true,
  10.     onEnd ({ newIndex, oldIndex }) {
  11.       const source = that.data[oldIndex] // 谁
  12.       const destination = that.data[newIndex] // 移动到哪儿
  13.       console.log(source, destination)
  14.       console.log(newIndex, oldIndex)
  15.       // 删除原来的，新增新位置
  16.       that.data.splice(oldIndex, 1)
  17.       that.data.splice(newIndex, 0, source)
  18.       if (newIndex > oldIndex) {
  19.         // console.log(destination.template_id, source.template_id)
  20.         that.updateSortable(source.template_id, destination.template_id, 2)
  21.       } else if (newIndex < oldIndex) {
  22.         // console.log(source.template_id, destination.template_id)
  23.         // that.updateSortable(source.template_id, destination.template_id)
  24.         that.updateSortable(source.template_id, destination.template_id, 1)
  25.       }
  26.     }
  27.   })
  28. }

Modal对话框

自定义$confirm、$info…

如下

  1. this.$confirm({
  2.   title: '提示',
  3.   okText: "確定",
  4.   cancelText: "取消",
  5.   icon: (h) => (
  6.     <a-icon
  7.     type="exclamation-circle"
  8.      style="color:#FAAD14"
  9.      theme="filled"
  10.    />
  11.   ),
  12.   content: (h) => (
  13.   <div style="font-size:14px;color:#333333">
  14.   當前狀態為已完成，調整後將會清除「完成情況」，是否確定調整狀態？
  15.   </div>
  16. ),
  17.   onOk() {},
  18. });
  21. this.$info({
  22.   title: "提示",
  23.   content: "你沒有以企業發起該業務的權限，請選擇項目",
  24.   okText: "確定",
  25.   icon: (h) => (
  26.     <a-icon
  27.       type="exclamation-circle"
  28.       style="color:#FAAD14"
  29.       theme="filled"
  30.     />
  31.   ),
  32.   onOk: () => {
  33.     this.form.setFieldsValue({
  34.       project: undefined,
  35.     });
  36.     return;
  37.   },
  38. });

image.png