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;">  

 

 

 

 

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号