博主精品——实用的项目操作（前端）不再更新，AI永远的神！

DBC 2.1K 0
温馨提示

此篇文章目的，基本都是真实项目中博主遇到的一些比较简单，但是却需要花一些时间查阅资料的操作。这里主要是避免博主再遇到同样问题时候浪费时间继续查阅文章的过程。缩短开发时间，使我们有空余的时间做其他的事 [aru_36]

前端

iView

博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图

补充知识

@on-change="orderNoChange($event)"

温馨提示

数据变化之后就触发

@on-blur="kunnrChange($event)"

温馨提示

焦点离开之后触发

1、动态选中table复选框及获取选中的数组内容（其实可以发散思维，这种模式可以实现很多自定义功能）

关键代码

 this.$refs.producCurrentRowTable.objData[index]._isChecked  = true

小例子

          <Table highlight-row ref="producCurrentRowTable" border :columns="columns03" :data="data03" @on-selection-change = 'selectTable'>
            <!-- 产品编号  -->
            <template slot-scope="{ row, index }" slot="productNo" >
              <Input readonly="readonly" size="small" clearable style="width:70%" @on-change="productChange($event,index)" v-model="row.productNo" ref="matnr" ></Input>
              <Icon type="ios-search" size="20" color="#2d8cf0" class="mt10 mr5 hand_cursor"   @click= " modal3 = true , setTemporary(index)"/>
            </template>
    productChange(event,index){

      if (this.$refs.producCurrentRowTable.objData[index]._isChecked){
        this.$refs.producCurrentRowTable.objData[index]._isChecked  = true
      }else {
        this.$refs.producCurrentRowTable.toggleSelect(index)
        this.$refs.producCurrentRowTable.objData[index]._isChecked  = true
      }
    },
     this.selection = this.$refs.producCurrentRowTable.getSelection()
解析

上面的内容功能就是针对复选框如何动态的勾选，以及获取已经勾选的数组内容。
一般常见的需求解决：比如需要输入数据时候自动勾选上复选框，但是你的数组是可以无限增加的，那么我们如何定位呢? 或者我们需要只上传一些我们勾选的内容，我们应该如何更好的获取数组中的内容呢？

2、简单的table栏删除操作

博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图2

温馨提示

当我们需要如上图那样进行删除操作的时候，备忘，仅提供思想

添加元素

            addProductList(){
                this.index++;
                this.data03.push({"No":this.index});

            },
温馨提示

我们在双向绑定的时候，可以多定义一个index，标识一下

删除元素

            delProductList() {
                if (this.selection.length == 0) {
                    this.$Message.info("请选择要删除的行！");
                } else {
                    for (var i = 0; i < this.data03.length; i++) {
                        for (var j = 0; j < this.selection.length; j++) {
                            if (this.selection[j].No === this.data03[i].No) {
                                this.data03.splice(i, 1)
                            }else{
                                console.log('没有选中删除')
                            }
                        }
                    }
                    this.selection = [];
                }

            },
温馨提示

相信看起来很简单，仅仅就是遍历来查找序号之间对应的来删除，这是基本实现，如果大神要优化相信也很简单。

3、动态生成列表

博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图4

如上图中的效果，发散思维，实现很多种操作

        <vcard title="订购列表" color='#DA2728' class="mt10">
          <div class="add_edit mb10">
            <a @click="addProductList"><Icon type="md-add" />新增</a>
            <a @click="delProductList"><Icon type="md-close" />删除</a>
          </div>
          <Table highlight-row ref="producCurrentRowTable" border :columns="columns03" :data="data03" @on-selection-change = 'selectTable'>
            <template slot-scope="{ row, index }" slot="productNo" >
              <Input   size="small" v-model="row.productNo" clearable style="width:70%" ref="divs" @on-change="productChange($event,index)"></Input>
              <Icon type="ios-search" size="20" color="#2d8cf0" class="mt10 mr5 hand_cursor" @click= "openModal(1,index)"/>
            </template>
            <template slot-scope="{ row, index }" slot="productName" >
              <Input  disabled size="small" v-model="row.productName" clearable style="width:70%;border: none" ref="" readonly="readonly"></Input>
            </template>
            <template slot-scope="{ row, index }" slot="price" >
              <!--                        @on-blur="addProductNumber($event,index)"-->
              <Input  disabled size="small" v-model="row.price" clearable style="width:70%;border: none" @on-change="onPriceChange($event,index)" ref="divssss"  ></Input>
            </template>
            <!--                    @on-blur="addProductPrice($event,index)"-->
            <template slot-scope="{ row, index }" slot="count" >
              <Input  size="small" v-model="row.count" clearable style="width:70%;border: none" @on-change="countChange($event,index)" ref="divsss" ></Input>
            </template>
          </Table>
          <div class="mt10 txt-center">
          </div>
        </vcard>

博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图6

    addProductList(){
      this.index++;
      this.data03.push({"No":this.index});

    },
    delProductList() {
      if (this.selection.length == 0) {
        this.$Message.info("请选择要删除的行！");
      } else {

        for (var i = 0; i < this.data03.length; i++) {
          for (var j = 0; j < this.selection.length; j++) {
            if (this.selection[j].No === this.data03[i].No) {
              this.data03.splice(i, 1)
            }else{
              console.log('没有选中删除')
            }
          }
        }
        this.selection = [];
      }

    },
温馨提示

相信很简单哈！这还不懂，看来应该得好好补补了！[aru_12]

4、锁table栏之后会导致导航条拉不动的BUG —— 博主这个版本遇到，不知道以后ivew会不会修复

博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图8

如上面所说，我们锁了3行，然后下面的导航栏就没办法拉动了！

  .ivu-table-fixed {
    height: auto !important;
  }
温馨提示

强行修改就完事了！ [aru_19]
老规矩发散思维：我们在遇到这些鬼鬼怪怪的问题，可以使用浏览器调试工具，直接定位到组件位置，改样式就可以了！[aru_42]。几乎所有类似的问题都可以这样解决！

5、经典的时间选择器用法——实用

博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图10

                            <Col span="8">
                                <FormItem label="建单时间">
                                    <DatePicker size="small" type="datetimerange" format="yyyy-MM-dd"
                                                placeholder="选择日期时间" style="width: 100%"
                                                v-model="formList.createTime"></DatePicker>
                                </FormItem>
                            </Col>
                let startTime = "";
                let endTime = "";


                if((this.formList.createTime[0]!="" || this.formList.createTime[1]!="") && (this.formList.createTime[0]!=undefined || this.formList.createTime[1]!=undefined)){
                    startTime=utils.formatDateTimeStart(this.formList.createTime[0]);
                    endTime=utils.formatDateTimeEnd(this.formList.createTime[1]);
                }
温馨提示

就那么简单 [aru_51]

通用操作

一、动态获取地址

温馨提示

这个操作主要是用于比如说文件上传等；文件上传组件它不支持简单的接口调用，它直接把地址写在了控件上面，非常的不友好，如果我们的地址变化了，还要层层的找进来，太离谱了！ [aru_45]

    this.ExcelUPCCodeUrl = process.env.BASE_API
    this.ExcelUPCCodeUrl = this.ExcelUPCCodeUrl.substr(0, this.ExcelUPCCodeUrl.length - 1);
    this.ExcelUPCCodeUrl = this.ExcelUPCCodeUrl+ receiveOrder.paseUploadExcelUPCCode+"?token="+store.state.user.token
温馨提示
  • 第一行就是我们找到我们最根本的地址，一般为网关转发的根路径
  • 第二行是去除根地址最后的  /  符号，避免后面拼装起来的时候会有两个  // ，当然这里根据自身需求来搞，这种情况我也给出来，避免还去搜 [aru_22]
  • 第三行相信也很简单，就是各种地址的拼接了，我这里的例子是  （根地址）+ （文件上传地址） + （token拼接）
    • 我这里的token位置不一定是一样的位置，除非架构哥也是照搬的 [aru_63]
  • 这里有可能还需要文件模版之类的无法映射，可以看我的图做参考。。。

    • 博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图12

    • 博主精品——实用的项目操作（前端）不再更新，AI永远的神！插图14

    • downloadUrl:require('../../assets/xls/serialCodeTemplate.xlsx'),

二、页面通过传参进行改变

温馨提示

此操作重要点在于，我们的页面是通过一个父组件重复进行调用，页面依然是这个页面，所以Vue为了节省资源并没有刷新此页面，我们可以通过watch函数钩子来进行我们想要的函数操作！下面看一个小例子：

 watch: {
  '$route' (to, from) {
  //刷新参数放到这里里面去触发就可以刷新相同界面了
    this.playUrl(this.$route.query.ep_id);
        this.getDetail(this.$route.query.video_id);
  }
 }
温馨提示

这样我们就可以实现啦！

本文作者为DBC，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

分享