Vue+iView tabs select $ref 的使用

Vue+iView tabs select $ref 的使用

iView tabs的使用过程中，切换菜单，会出现接口数据未触发情况。
例如：切换菜单为菜单一时，添加操作，列表新增成功一条数据，
切换到菜单二，接口数据未能触发，数据未能及时更新出来。

---

ref的基本用法
ref和 $ref的区别

---

前言

前端项目开发中，vue,$refs的一些简单操作。

---

一、iview tabs的使用

日常开发过程中，可使用iview的一些组件。

比如：

tabs，DatePicker，menu

二、tabs的使用步骤

1.引入

代码如下（示例）：

<script>
import accountEnquiry from "./account_enquiry.vue"
import TradeRecord  from "./trade-record.vue"
export default {
    components: {
        accountEnquiry,
        TradeRecord
    },
}
</script>

2.页面

给操作组件加上ref：

<template>
    <div>
        <Tabs type="card" @on-click="changeTabs">
            <TabPane label="账务查询">
                <account-enquiry/>
            </TabPane>
            <TabPane label="缴费记录">
                <trade-record  ref="record"/>
            </TabPane>
        </Tabs>
    </div>
</template>

3.切换状态

使用$refs操作子组件接口，进入切换菜单时，会触发接口，刷新数据。

export default {
    methods:{
        changeTabs(name){
         if(name === 1){
          this.$refs.record.getTabelList();//操作列表接口
         }
        }
    },
}

三、$refs的其他应用场景

1.表单清空及校验

  <Form inline :model="editForm" ref="editForm">
        <FormItem prop="name">
            <Input v-model="editForms.name"  :maxlength='100' disabled />
       </FormItem>
       
        <FormItem label="付费类型: " prop="payType">
          <Select style="width: 250px" v-model="editForm.payType" ref="serviceStatusClear" clearable>
            <Option value="0">预付</Option>
            <Option value="1">后付</Option>
        </Select>
        </FormItem>
        
         <FormItem prop="validTime" label="价格生效时间："  v-show="modalTitle!=='商品下单'">
            <DatePicker
              type="datetime"
              v-model="editForm.validTime"
              placeholder="默认立即生效"
              style="width: 300px"
              ref="timeStatusClear"
              clearable
            ></DatePicker>
          </FormItem>
   </Form>     

//表单校验判断
 this.$refs.editForm.validate((valid) => {
      if (valid) {
            this.getList();//获取数据方法
        }
}

//清空
this.$refs.editForm.resetFields();

//消除下拉选中样式
 this.$refs.serviceStatusClear.clearSingleSelect();

//时间选择初始化
 this.$refs['timeStatusClear'].focusedDate=new Date();

2.echars渲染

<div ref="dom" class="charts chart-pie"></div>
 data () {
    return {
      dom: null
    }
 },
 this.dom = echarts.init(this.$refs.dom, 'tdTheme')
 this.dom.setOption(option)
 

3.操作分页

 <Page
      :total="totalElements"
      size="small"
      ref="pages"
      show-elevator
      show-sizer
      show-total
      class="pagenation"
      :page-size='30'
      :page-size-opts="[10,20,30,40,50]"
      @on-page-size-change="onPageSizeChange"
      @on-change="onPageChange"
    />
    
  queryTabelList(){
      this.$nextTick(function(){
          this.$refs['pages'].currentPage = 1;
      })  
       this.queryParam.pageNumber=1
      this.getTabelList();
    },

4.时间组件的使用

import SearchSet from "_c/search-set"
<search-set ref="dateSearch">
   <span class="search-label label-first">接收时间</span>
</search-set>


this.$refs.dateSearch.resetDateSearch()
let { valid, S_createTime_LTOE:S_endTime_LTOE, S_createTime_GTOE:S_startTime_GTOE}
= this.$refs.dateSearch.getSearchTime()

子组件search-set内方法:

//清空时间方法
resetDateSearch(){
      if(this.defaultTime){
        this.condition.S_createTime_GTOE = this.getDefaultTime(),
        this.condition.S_createTime_LTOE = this.getDefaultTime('end')
      }else{
        this.condition.S_createTime_GTOE = ""
        this.condition.S_createTime_LTOE = ""
      }
}

5.获取对应大小

  <div class="scroll-outer" ref="scrollOuter" @DOMMouseScroll="handlescroll" @mousewheel="handlescroll">
      <div ref="scrollBody" class="scroll-body" :style="{left: tagBodyLeft + 'px'}">
        <transition-group name="taglist-moving-animation">
          <Tag
            type="dot"
            v-for="(item, index) in list"
            ref="tagsPageOpened"
            :key="`tag-nav-${index}`"
            :name="item.name"
            :data-route-item="item"
            @on-close="handleClose(item)"
            @click.native="handleClick(item)"
            :closable="item.name !== $config.homeName"
            :color="isCurrentTag(item) ? 'primary' : 'default'"
            @contextmenu.prevent.native="contextMenu(item, $event)"
          >{{ showTitleInside(item) }}</Tag>
        </transition-group>
      </div>
    </div>

 handleScroll (offset) {
      const outerWidth = this.$refs.scrollOuter.offsetWidth
      const bodyWidth = this.$refs.scrollBody.offsetWidth
    },

6.控制select下拉面板的显示和隐藏

<FormItem label="系统菜单：" prop="menu">
     <Select v-model="editForm.menuId" ref="select"
           clearable class="input-width-250" 
           v-bind:disabled="this.editTitle == '查看'" @on-open-change="closeSel">
           <Option :value="editForm.menuId" style="display:none" >{{this.editForm.menu }}</Option>
           <Tree :data="menuTree"  @on-check-change="checkMenu" @on-select-change="selectMenu"></Tree>
     </Select>
 </FormItem>

下拉面板控制:

 //展开与关闭 ref="select"，选中值，收起下拉面板
this.$refs.select.visible = false

下拉框的状态获取

//监听状态 @on-open-change="closeSel"
 closeSel(data){
       console.log("下拉状态", data);//true  false
 },

应用实践场景: slelect下拉选中iview tree树形菜单，收起select下拉面板，回显选中的菜单值。

---

总结

本文简单小结了$ref在项目中的简单实践，用简单的实例实践一个小知识点，每天进步一点点。