ant design pro for vue
vue 2020-05-07 10:48:02

1、定制主题

src/config/defaultSettings.js

 

2、主体布局

src/layout/BasicLayout.vue

 

3、定制主题

https://www.antdv.com/docs/vue/customize-theme-cn/

项目根目录下新建文件vue.config.js

JavaScript Code复制内容到剪贴板
  1. // vue.config.js  
  2. module.exports = {  
  3.   css: {  
  4.     loaderOptions: {  
  5.       less: {  
  6.         modifyVars: {  
  7.           'primary-color': '#1DA57A',  
  8.           'link-color': '#1DA57A',  
  9.           'border-radius-base': '2px',  
  10.         },  
  11.         javascriptEnabled: true,  
  12.       },  
  13.     },  
  14.   },  
  15. };  

 

4、vue-cil3 运行报错 --- warnings potentially fixable with the `--fix` option 

vue.config.js，找到

JavaScript Code复制内容到剪贴板
  1. //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint  
  2.   lintOnSave: false,  

 

 

添加新路由

1、引入页面

/src/router/generator-routers.js

2、添加路由

/src/config/router.config.js

3、如果是mock数据，修改用户权限

/src/mock/services/user.js

 

a-select，绑定的value必须是string类型，否则会报错，如果是Number类型，可以用toString转一下，同样的赋值的时候，也需要将它赋值为String

XML/HTML Code复制内容到剪贴板
  1.   <a-select  
  2.     mode="tags"  
  3.     placeholder="请选择负责人"  
  4.     v-decorator="['leader',{rules: [{ required: true, message: '负责人不可为空' }]}]"  
  5.   >  
  6.     <a-select-option  
  7.       v-for="(item) in leaderOptions"  
  8.       :key="item.userId"  
  9.       :value="item.userId.toString()"  
  10.     >{{ item.name }}</a-select-option>  
  11.   </a-select>  
  12.   
  13.   
  14.   
  15.   
  16. const leader = this.model.leaderList ? this.model.leaderList.map(e => {  
  17.   return e.userId.toString()  
  18. }) : []  
  19.   
  20. const fieldsValues = {  
  21.   leader: leader  
  22. }  
  23. this.form.setFieldsValue(fieldsValues)  

 

如果a-select需要给一个默认值：

XML/HTML Code复制内容到剪贴板
  1. <a-select v-decorator="['unit', { initialValue: 'kg' }]" style="width:60px;">  

 

 

也可以这样写：

XML/HTML Code复制内容到剪贴板
  1. <a-select  
  2.           ref="select"  
  3.           v-model:value="authMethods"  
  4.           style="width: 120px"  
  5.           @change="handleAuthMethodsChange"  
  6.       >  
  7.         <a-select-option value="1">芝麻信用</a-select-option>  
  8.         <a-select-option value="2">芝麻信用2</a-select-option>  
  9.       </a-select>  
  10.   
  11.   
  12.   
  13. <a-select v-model:value="formData.c_input3" :options="formDataInput3Options" placeholder="请选择证件"/>  
  14.   
  15.   
  16. <script setup>  
  17. import { getCurrentInstance, ref } from 'vue'  
  18.   
  19. const formDataInput3Options = ref([  
  20.   { value: '1', label: '身份证' },  
  21.   { value: '2', label: '军官证' },  
  22. ])  
  23. </script>  

 

 

a-form 常用方法：

XML/HTML Code复制内容到剪贴板
  1.     <a-form ref="formRef"  
  2.             :model="formData"  
  3.             :rules="formRules"  
  4.             :label-col="{  
  5.               // span: 8  
  6.               style: { width: '245px' }  
  7.             }"  
  8.             @finish="onFinish"  
  9.     >  
  10.       <a-form-item label="姓名" name="c_input1">  
  11.         <a-input v-model:value="formData.c_input1" placeholder="请输入您的真实姓名" />  
  12.       </a-form-item>  
  13.       <a-form-item label="手机号" name="c_input2">  
  14.         <a-input v-model:value="formData.c_input2" placeholder="请输入您的手机号" />  
  15.       </a-form-item>  
  16.       <a-form-item label="证件类型" name="c_input3">  
  17.         <a-select v-model:value="formData.c_input3" :options="formDataInput3Options" placeholder="请选择证件"/>  
  18.       </a-form-item>  
  19.       <a-form-item label="证件号码" name="c_input4">  
  20.         <a-input v-model:value="formData.c_input4" placeholder="请输入您的证件号" />  
  21.       </a-form-item>  
  22.       <a-form-item label=" " :colon="false">  
  23.         <div class="base-flex base-rows base-align-items-center">  
  24.           <a-button class="base-btn" @click="goBack">上一步</a-button>  
  25.           <a-button type="primary" class="base-btn primary base-ml25" html-type="submit">下一步</a-button>  
  26.         </div>  
  27.       </a-form-item>  
  28.   
  29.     </a-form>  
  30.   
  31.   
  32. <script setup>  
  33. const formRef = ref(null)  
  34. const formData = ref({  
  35.   c_input1: '',  
  36.   c_input2: '',  
  37.   c_input3: '1',  
  38.   c_input4: '',  
  39. })  
  40. const formRules = {  
  41.   c_input1: [{ required: true, message: '请输入姓名' }],  
  42.   // c_input2: [{ required: true, message: '请输入联系电话' }]  
  43.   c_input3: [{ required: true, message: '请选择证件类型' }],  
  44.   c_input4: [{ required: true, message: '请输入证件号码' }]  
  45. }  
  46. const formDataInput3Options = ref([  
  47.   { value: '1', label: '身份证' },  
  48.   { value: '2', label: '军官证' },  
  49. ])  
  50. const onFinish = async () => {  
  51.   try {  
  52.     const values = await formRef.value.validateFields()  
  53.   
  54.     console.log('Success:', values)  
  55.   } catch (errorInfo) {  
  56.     console.log('Failed:', errorInfo)  
  57.   }  
  58. }  
  59. </script>  

 

添加自定义校验规则： 

JavaScript Code复制内容到剪贴板
  1. const validateIDCard = async (_rule, value) => {  
  2.   if (value === '') {  
  3.     return Promise.reject('请输入证件号');  
  4.   } else {  
  5.     // if (formState.checkPass !== '') {  
  6.     //   formRef.value.validateFields('checkPass');  
  7.     // }  
  8.     // return Promise.reject('请输入正确的身份证号');  
  9.     return Promise.resolve();  
  10.   }  
  11. }  
  12. const formRules = {  
  13.   c_input1: [{ required: true, message: '请输入姓名' }],  
  14.   // c_input2: [{ required: true, message: '请输入联系电话' }]  
  15.   c_input3: [{ required: true, message: '请选择证件类型' }],  
  16.   c_input4: [{ required: true, validator: validateIDCard, trigger: 'change' }]  
  17. }  

 

这里校验是只要输入任意一个字符则校验，对于证件之类的，调用API有次数限制的，最好是放到提交的时候校验：

XML/HTML Code复制内容到剪贴板
  1.     <a-form ref="formRef"  
  2.             :model="formData"  
  3.             :label-col="{  
  4.               // span: 8  
  5.               style: { width: '245px' }  
  6.             }"  
  7.             @finish="onFinish"  
  8.     >  
  9.       <a-form-item label="姓名" name="c_input1" v-bind="validateInfos.c_input1">  
  10.         <a-input v-model:value="formData.c_input1" placeholder="请输入您的真实姓名" />  
  11.       </a-form-item>  
  12.       <a-form-item label="手机号" name="c_input2">  
  13.         <a-input v-model:value="formData.c_input2" placeholder="请输入您的手机号" />  
  14.       </a-form-item>  
  15.       <a-form-item label="证件类型" name="c_input3" v-bind="validateInfos.c_input3">  
  16.         <a-select v-model:value="formData.c_input3" :options="formDataInput3Options" placeholder="请选择证件"/>  
  17.       </a-form-item>  
  18.       <a-form-item label="证件号码" name="c_input4" v-bind="validateInfos.c_input4">  
  19.         <a-input v-model:value="formData.c_input4" placeholder="请输入您的证件号" />  
  20.       </a-form-item>  
  21.       <a-form-item label=" " :colon="false">  
  22.         <div class="base-flex base-rows base-align-items-center">  
  23.           <a-button class="base-btn" @click="goBack">上一步</a-button>  
  24.           <a-button type="primary" class="base-btn primary base-ml25" html-type="submit">下一步</a-button>  
  25.         </div>  
  26.       </a-form-item>  
  27.   
  28.     </a-form>  
  29.   
  30. <script setup>  
  31. import { getCurrentInstance, reactive, ref, toRaw } from 'vue'  
  32. import { userStore } from '@/stores/userStore'  
  33. import { useRoute, useRouter } from 'vue-router'  
  34. import { Form } from 'ant-design-vue'  
  35. const { proxy } = getCurrentInstance()  
  36. const $TOOL = proxy.$TOOL  
  37. const $CONFIG = proxy.$CONFIG  
  38. const $API = proxy.$API  
  39.   
  40. const useUserStore = userStore()  
  41. const route = useRoute()  
  42. const router = useRouter()  
  43.   
  44.   
  45. const useForm = Form.useForm  
  46. const formRef = ref(null)  
  47. const formData = ref({  
  48.   c_input1: '',  
  49.   c_input2: '',  
  50.   c_input3: '1',  
  51.   c_input4: '',  
  52. })  
  53. // 自定义校验方法，一定要放在rules前面  
  54. const validateIDCard = async (_rule, value) => {  
  55.   if (value === '') {  
  56.     return Promise.reject('请输入证件号码');  
  57.   }  
  58.   console.log('校验证件号',value)  
  59.     // try {  
  60.     //   await $API.auth.validateIDCard.post(formData.value.c_input4)  
  61.     //   console.log('证件号码校验成功');  
  62.     // } catch (apiError) {  
  63.     //   console.error('API 校验失败:', apiError.message);  
  64.     //   return Promise.reject()  
  65.     // }  
  66.     if(value === '666') {  
  67.       return Promise.reject('请输入正确的身份证号');  
  68.     }  
  69.     return Promise.resolve();  
  70. }  
  71. const formRules = reactive({  
  72.   c_input1: [{ required: true, message: '请输入姓名', trigger: 'change' }],  
  73.   // c_input2: [{ required: true, message: '请输入联系电话' }]  
  74.   c_input3: [{ required: true, message: '请选择证件类型', trigger: 'change' }],  
  75.   c_input4: [{ required: true, validator: validateIDCard, trigger: 'blur'}]  
  76. })  
  77. const formDataInput3Options = ref([  
  78.   { value: '1', label: '身份证' },  
  79.   { value: '2', label: '军官证' },  
  80. ])  
  81. const { resetFields, validate, validateInfos } = useForm(formData, formRules);  
  82.   
  83. const onFinish = async () => {  
  84.   // await validateIDCard()  
  85.   validate()  
  86.       .then(() => {  
  87.         console.log(formData.value)  
  88.       })  
  89.       .catch(err => {  
  90.         console.log('error', err);  
  91.       });  
  92. }  
  93.   
  94. </script>  

 

 

 

 

 

s-table，展开所有的树列表，原有的API defaultExpandAllRows，在场景下并不能生效

PHP Code复制内容到剪贴板
  1.         <s-table    
  2.           ref="table"    
  3.           rowKey="id"    
  4.           :data="loadData"  
  5.           childrenColumnName="children"    
  6.           :expandedRowKeys="expandedRowKeys"    
  7.           ...    
  8.           @expand="onExpand"    
  9.         >    
  10.     
  11.     
  12. export default {    
  13.   data () {    
  14.     return {    
  15.       expandedRowKeys: [], // table展开的行   
  16.       // 加载数据方法 必须为 Promise 对象  
  17.       loadData: parameter => {  
  18.         const requestParameters = Object.assign({}, parameter, this.queryParam)  
  19.         return departmentList(requestParameters)  
  20.           .then(res => {  
  21.             const data = this.setItems(res.data.list)  
  22.             const result = {  
  23.               data: data,  
  24.               pageSize: res.data.pageInfoVo.pageSize,  
  25.               pageIndex: res.data.pageInfoVo.pageIndex,  
  26.               totalCount: res.data.pageInfoVo.total,  
  27.               totalPage: res.data.pageInfoVo.totalPage  
  28.             }  
  29.   
  30. // 这里是写了一个方法，从树列表中获取所有的id，然后赋值  
  31.             const ids = getTreeListId(data)  
  32.             this.expandedRowKeys = ids  
  33.             return result  
  34.           })  
  35.       },  
  36.    
  37.   },    
  38.   computed: {    
  39.     rowSelection () {    
  40.       return {    
  41.         selectedRowKeys: this.selectedRowKeys,    
  42.         onChange: this.onSelectChange    
  43.       }    
  44.     }    
  45.   },    
  46.   methods: {    
  47.     onExpand (expanded, record) {    
  48.         console.log('extend:' + expanded)    
  49.         console.log('record: ' + JSON.stringify(record))    
  50.         if (expanded) {    
  51.           // 设置展开窗Key，代表展开操作    
  52.           this.expandedRowKeys.push(record.id)    
  53.         } else {    
  54.           // 代表折叠操作    
  55.           if (this.expandedRowKeys.length) {    
  56.               thisthis.expandedRowKeys = this.expandedRowKeys.filter(v => {    
  57.                 return v !== record.id    
  58.               })    
  59.           }    
  60.         }    
  61.     },    

 

 

JavaScript Code复制内容到剪贴板
  1. /**  
  2.  * 根据树列表，获取所有的id值  
  3.  * @param {*} data  树列表  
  4.  * @param {*} field 需要取的字段名，如id  
  5.  * @param {*} children 子级的字段名，如children  
  6.  * @param {*} arr 返回的id集合，默认为空  
  7.  * @returns  
  8.  */    
  9. export function getTreeListId (data, field = 'id', children = 'children', arr = []) {    
  10.   for (const item of data) {    
  11.     arr.push(item[field])    
  12.     if (item[children] && item[children].length) getTreeListId(item[children], field, children, arr)    
  13.   }    
  14.   return arr    
  15. }    
  16.     
  17. /**  
  18.  * 处理children没有值的时候，将其置为空  
  19.  * @param {*} data  
  20.  * @param {*} children  
  21.  * @returns  
  22.  */    
  23. export function processTreeChildren (data, children = 'children') {    
  24.   return data.map((item, index) => {    
  25.     if (item[children].length > 0) {    
  26.       processTreeChildren(item[children])    
  27.     } else {    
  28.         delete item[children]    
  29.     }    
  30.     return item    
  31.   })    
  32. }    

 

 

 

 

 

Vue-router-link跳转页面时不在顶部问题解决

在router文件夹下的index.js文件中添加一段代码

XML/HTML Code复制内容到剪贴板
  1. scrollBehavior (to, from, saveTop) {  
  2.   if (saveTop) {  
  3.     return saveTop  
  4.   } else {  
  5.     return { x: 0, y: 0 }  
  6.   }  
  7. }  

 

1.png

 

 

 

antdv 表格组件

1.png

2.png

3.png

1、在src/components下面解压ProTable

ProTable.zip
文件类型: .zip cc83829087d085d52498e1efd32325d2.zip (4.92 KB)

2、修改src/components下面的index.js，将ProTable仿着STable加进去

3、视图

PHP Code复制内容到剪贴板
  1. import {Ellipsis, ProTable } from '@/components'    
  2.   
  3. export default {  
  4.   components: {  
  5.     Ellipsis,  
  6.     ProTable  
  7.   },  

 

XML/HTML Code复制内容到剪贴板
  1. <a-card :bordered="false" style="margin-top:20px;">  
  2.   
  3.   <pro-table  
  4.     ref="table"  
  5.     size="default"  
  6.     childrenColumnName="childs"  
  7.     rowKey="id"  
  8.     :showPagination="true"  
  9.     :columns="columns"  
  10.     :data="loadData"  
  11.     :alert="false"  
  12.     :rowSelection="rowSelection"  
  13.     :tableListItem="{key:'number',status: 'string | number'}"  
  14.     :settings="{indeterminate:true,checkAll:true,defaultChecked:['a1','a4']}"  
  15.     @clickSettingColumns="clickTableSettingColumns"  
  16.   >  
  17.   
  18.     <div slot="toolBar">  
  19.       <a-button type="primary">  
  20.         新建  
  21.       </a-button>  
  22.     </div>  
  23.   
  24.     <span slot="result" slot-scope="text">  
  25.       <a-badge :status="text | typeColorFilter" :text="text | typeTextFilter" />  
  26.     </span>  
  27.     <span slot="serial" slot-scope="text, record, index">  
  28.       {{ index + 1 }}  
  29.     </span>  
  30.     <span slot="action" slot-scope="text, record">  
  31.       <template>  
  32.         <a @click="handleEdit(record)">编辑</a>  
  33.         <a-divider type="vertical" />  
  34.         <a @click="handleDelete(record)">删除</a>  
  35.       </template>  
  36.     </span>  
  37.   
  38.   </pro-table>  
  39. </a-card>  

 

 

 

antdv 筛选组件支持单选，多选

1.png

CheckableTag.zip
文件类型: .zip 635ad9af737b08648675ab45202b862a.zip (2.05 KB)

 

 

 

a-switch 开关组件

XML/HTML Code复制内容到剪贴板
  1. <a-switch checked-children="是" un-checked-children="否" @change="onChangeSwitch" v-model="showChildren" />    
  2.   
  3.   
  4. <script>  
  5. ...  
  6. methods: {  
  7.     onChangeSwitch (e) {  
  8.       this.showChildren = e  
  9.     },  
  10. }  
  11.   
  12. </script>  

 

 

XML/HTML Code复制内容到剪贴板
  1. <a-switch checked-children="开" un-checked-children="关" :defaultChecked="record.status === 1" @change="(e) => changeStatus(e, record)" />  
  2.   
  3. <script>  
  4. ...  
  5. methods: {  
  6.     changeStatus (checked, record) {  
  7.       // do something  
  8.     },  
  9. }  
  10. </script>  

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/510.html

上一篇 mint ui cell
下一篇 首次赋值不触发watch的解决方法
相关的文章
Powered by yoyo苏ICP备15045725号