2.表单校验功能:
1 //定义props 2 rules: { 3 name: [ 4 { required: true, message: "请输入企业名称", trigger: "blur" } 5 ]} 6 7 //方法 8 submitk() { 9 this.$refs.reference.validate(valid => { 10 if(valid) { 11 自定义操作表单数据代码; 12 } 13 }) 14 },
3.省市县的二级联动功能:
1 // 获取地区,默认id=0 2 async getCity(id) { 3 let _this = this; 4 // 如果选择省,将市的select设置为空 5 this.form.city = ""; 6 const res = await this.$axios.post(`/region/list`, { region_id: id }); 7 if (id == 0) { 8 // 如果 id=0 得到的数据为省的 9 _this.provinceList = res.data; 10 let id = this.form.province; 11 // 再同时获取市的数据 12 _this.$axios 13 .post(`/region/list`, { region_id: id }) 14 .then(function(res) { 15 _this.cityList = res.data; 16 }); 17 } else { 18 // 如果 id!=0 得到的数据为市的 19 this.cityList = res.data; 20 } 21 },
4.拖动排序功能:
使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.
5.打印页面功能:
使用print插件 https://github.com/xyl66/vuePlugs_printjs
教程地址::https://blog.csdn.net/peiyongwei/article/details/82460709
1 <template> 2 3 <section ref="print"> 4 5 <要打印内容/> 6 7 <div class="no-print">不要打印我</div> 8 9 </section> 10 11 </template> 12 13 this.$print(this.$refs.print) // 调用方法使用
6.vue-router 在新窗口打开页面的功能
1.<router-link>标签实现新窗口打开
<router-link target="_blank" :to="{path:‘/home‘,query:{id:‘1‘}}">新页面打开home页</router-link>
2.编程式导航：
print_schedule() { let id = this.id; const { href } = this.$router.resolve({ name: `print_schedule`, params: { id: id } }); window.open(href, "_blank"); },
7.Vue日历组件的功能
引用的是他人写好的组件: https://github.com/herozhou/vue-order-calendar
在他的基础上增加了功能,实现了备注功能.实现方法是:后台返回的备注数据中,要求带有数据为天数的字段,然后使用-for循环,判断,渲染
1 <!-- 遍历备注,判断日期是否一致 --> 2 <div v-for="(item,i) in remarksList" :key="i"> 3 <el-tooltip placement="top"> 4 <div slot="content" style="max-width:200px;">{{item.content}}</div> 5 <div class="remarks" v-if="dayobject.day.getDate() == item.day">{{item.content}}</div> 6 </el-tooltip> 7 </div>
未完,待续......
原文：https://www.cnblogs.com/jun-qi/p/10542972.html