vue多种小功能

vue+element+es6

1. 滚轮到最底部
2. 添加新一条数据，input框自动获得焦点
3. 打开新窗口页面
4. elelment table 序号排列
5. 资料文件上传
6. this.reload() 方法配置

1.滚轮到最底部

this.$nextTick(() => {
     document.documentElement.scrollTop = 10000;
})

2.添加新一条数据，input框获得焦点  https://www.jianshu.com/p/63bfbbbd1e82

根据 ref 动态增加状态值。ref有值就会获得焦点，没有就不会。

<el-col :span="13" class="padding_left">
    <div class="grid-content">
     <el-input v-model="q.describe" class="paper_name" :ref="q.inputFocus"></el-input>        </div>
</el-col>

addQueastion: function(){
      // 添加新数据之前清除之前数据的 inputFocus 状态
     this.qustion.forEach(function(item){
            item.inputFocus = "";
     })
     let quest = {
            describe: "",
            percent: 1,
            checked: true,
            inputFocus: "inputFocus"
     }
     this.qustion.push(quest);
     this.$nextTick(() => {
           // 控制滚轮到底部
           document.documentElement.scrollTop = 10000;
           // 新增加的问题第一个input获得焦点
           this.$refs.inputFocus[0].$el.querySelector('input').focus()
     })
},

3.打开新窗口页面

const {href} = this.$router.resolve({
       name: "pydt",
       params: {
               id: id,
               studentStatus: 0
       }
});
window.open(href, '_blank');

解决办法①： 

window.open(window.location.origin + '/#/pydt?id='+id)

解决办法②：

window.open(window.location.origin + '/#/pydt/'+id)

vue 传参：

children: [
            {path: '/mydct', name: '满意度出题', iconCls: 'iconfont ele-icon-third-bangzhu1' , component: () => import('../views/admin/mydct.vue')},
        ]
this.$router.push({ path: '/pytpct', query: {id: util.encrypt(id)} });
this.$route.query.id

children: [
            {path: '/mydct/:id', name: '满意度出题', iconCls: 'iconfont ele-icon-third-bangzhu1' , component: () => import('../views/admin/mydct.vue')},
        ]
this.$router.push({ name: 'pytpct', params: {id: util.encrypt(id)} });
this.$route.params.id

4.elelment table 序号排列：

方法一：

方法二：

5.资料文件上传

<el-input v-model="submitPaper.fileUpload.value" class="input_file" :disabled="true"></el-input>
       <el-upload
       class="upload-demo"
       :show-file-list= "false"
       ref="upload"
       :action="submitPaper.fileUpload.doUpload"            
       :data="submitPaper.fileUpload.param" 
       :before-upload="beforeUpload"
       :on-success = 'handleSuccess'
       :on-change="changeFile"
       :auto-upload="false">
       <el-button>选择</el-button>
</el-upload>

fileUpload: {
      value: "",
      fileList: [],
      doUpload:'/api/up/file',
      param:{
           srid:''
      }
}

// 文件上传
changeFile(file, fileList) {
      this.submitPaper.fileUpload.value = file.name;
},     
beforeUpload: function(file){
      console.log(file)
},
handleSuccess(res,file,fileList){
      console.log(res)
      console.log(file,fileList)
},

show-file-list ： 上传文件列表展示与否 boolean   

:action : 上传地址

:data   ：上传地址的参数

:on-change: 本地上传文件信息

异步上传： this.$refs.upload.submit();

6.this.reload() 方法配置

主页面配置：

其他组件引用：

使用reload方法时，直接： this.reload()