Vue项目需求实现记录(永久更新)

1.表单校验功能:

  

  1. 在el-form标签中定义:rules="rules";ref="reference"
  2. 在el-form-item定义prop="name";
  3. 在选项data中定义rules校验规则;
  4. 在提交方法中检查用户行为
 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     },
 
  注意点:①定义prop的时候,值要求是属于form绑定的model数据对象里面,同时名字要一样;
     ②选项中定义rules要在表单的数据之后

 

2.省市县的二级联动功能:

  

  1. 获取到省的数据;
  2. 在省的select中定义change?#24405;?同时将选中的省id传过去;
  3. 请求市的数据
  教程地址:https://blog.csdn.net/liuxin_1991/article/details/81502227
 
 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 },

 

3.拖动排序功能:

  

  使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.

  教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741
  教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094
  1. 安装npm install vuedraggable -S(可能需要安装Sortable)
  2. 引用import draggable from 'vuedraggable'
  3. 注册组件components: { draggable },
  4. 通过draggable标签来使用
  5. 调用update方法,此方法?#24405;?#23545;象返回新索引和旧索引,同样数据是响应式的.

  

4.打印页面功能:

  

  使用print插件  https://github.com/xyl66/vuePlugs_printjs

       教程地址::https://blog.csdn.net/peiyongwei/article/details/82460709

  1. min.js中引入
  2. import Print from '@/plugs/print'
  3. Vue.use(Print) // 注册

  

 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) // 调用方法使用

5.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");
    },

6.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>

 7.表格的滚动条在合计上边:

  

  修改样式.完美解决:

.el-table {
  overflow-x: auto;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  overflow: visible;
}
.el-table::after {
  position: relative;
}
.el-table--scrollable-x .el-table__body-wrapper {
  overflow: visible;
}

 

8.Vue样式scoped穿透方法:

  解决方法:起一个类名将页面包裹起来,后面加 /deep/

1 /* 自定义类名 table-container*/
2 .table-container /deep/ .el-table {
3   overflow-x: auto;
4 }

 9.下拉框样式的点击按钮

  有的时候统一操作页面的按钮有点多,我们就可以将它们制作?#19978;?#19979;拉框那样的类似操作

1.HTML样式部分:关键点在于command 方法和属性

 1 <el-dropdown
 2           size="small"
 3           placement="bottom"
 4           trigger="click"
 5           @command="batchOperate"
 6           style="margin-left: 10px;"
 7         >
 8           <el-button class="search-btn" size="mini">
 9             其他操作
10             <i class="el-icon-arrow-down el-icon--right"></i>
11           </el-button>
12           <el-dropdown-menu slot="dropdown">
13             <el-dropdown-item command="batch_remarks"
14               >批量备注</el-dropdown-item
15             >
16             <el-dropdown-item command="export_excel"
17               >本页导出Excel</el-dropdown-item
18             >
19           </el-dropdown-menu>
20         </el-dropdown>

2.Javascript部分:分别设置每个按钮的各自方法

 1 methods: {
 2       batchOperate(command) {
 3         switch (command) {
 4           case "batch_remarks":
 5             this.dialogRemarks();
 6             break;
 7           case "export_excel":
 8             this.exportExcel();
 9             break;
10         }
11       },
12       // 导出本页Excel表
13       exportExcel() {
14         console.log(111)
15       },
16       dialogRemarks() {
17        console.log(222)
18 }, 19 }

 

 

   如果您对我文章中所写的方法有更好的解决办法,欢迎您评论,不甚感激!!!

  未完,待续......

posted @ 2019-04-17 10:54 浚琦 阅读(...) 评论(...) 编辑 收藏
耐克篮球多少钱