iview使用总结

最新推荐文章于 2024-06-28 03:08:03 发布

alisaGreen

最新推荐文章于 2024-06-28 03:08:03 发布

阅读量1.6w

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/bluefish_flying/article/details/80936954

版权

前端专栏收录该内容

26 篇文章 2 订阅

订阅专栏

一、实现table表格实现多选和指定条件复选框不能选中的效果

（1）实现多选表格

<Table ref="selection" @on-selection-change="changeChose" @on-select-all="selectAll" style="margin-top:6px;"

@on-select="getTableChosedValue" border :columns="columns1" :data='managePlanList'></Table>

//具体解析

这里要实现全选，多选，更改选项的时候选中项发生变化。然后在列中设置一个checkbox选项框并且定义宽度

@on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
@on-select-all，点击全选时触发，返回值为 selection，已选项。
@on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。

//这里一定要使用on-select 不然全选或者多选后再取消某个选项后不能改变更新数据，刚开始选择十个参数，取消一个选项后本来应该9个，但是还是10个，就不能监控改变数据

changeChose(data){

//选项发生变化的时候使用

this.endSelectData = data;

},

getTableChosedValue(selection,row) {

//当多选的时候有变化的时候调用该方法

this.selectall=false;

this.SelectedDatas = selection;

},

selectAll(selection){

//全选

this.selectall=true;

this.SelectedDatas = selection;

},

//这里实现选中后但是没有进行操作让其选中的自动取消选中，不用一条一条对数据取消

if(_self.selectall){

_self.selectAll(false);

}else{

_self.getTableChosedValue(false);

}

（2）实现禁止选择某一个数据

//实现对指定数据禁止选择当前项

给 data 项设置特殊 key _checked: true 可以默认选中当前项。

给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。

//对后台返回的数组进行循环然后对满足条件的元素禁止选择

res.data.body.listBody.forEach(function(el,index){

if(el.nodeFlag == 1){

//有子节点 设置不能选

el._disabled = true;

}

})

效果图

对表格中的button 和姓名等做一些样式设置

编辑、删除等按钮

{

title: '详细',

width:120,

//align: 'center',

render: (h, params) => {



return h('div', [

h('Button', {

props: {

type: 'primary',

size: 'small'

},

style: {

marginRight: '5px'

},

on: {

click: () => {

let currenIndex = params.index;

this.isAdd = false;

var obj = this.unusualProblemSearchList[currenIndex];

let curenId = obj.errorId;

this.geteditDate(curenId);

this.getFileDate(curenId);

}

}

}, '编辑'),

h('Button', {

props: {

type: 'default',

size: 'small'

},

style: {

marginRight: '5px'

},

on: {



click: () => {

let currenIndex = params.index;

var obj = this.unusualProblemSearchList[currenIndex];

let curenId = obj.errorId;

this.deletemanageplan(curenId);

}

}

}, '删除')

]);

}

}

实现对字段长度进行省略后不能显示全部信息，实现鼠标滑动到当前项显示tip效果，首先定义一个attrs title属性，然后设置on mouseenter 鼠标进入方法，当鼠标进入的时候将当前项的值赋值给attrs中title的值就可以了

{

title: 'xx',

key: 'xx',

ellipsis: true,

width:80,

render: (h, params) => {

return ('div', [

h('span', {

attrs: {

title: this.ttaskOffice

},

on: {

mouseenter: () => {

//实现点击用户姓名然后显示其电话号码等功能，原来是通过动态路由，现在直接写在model里面

let currenIndex = params.index;

var obj = this.xx[currenIndex];

let mouseId = obj.errorSource;

this.ttaskOffice=mouseId;

}

}

}, params.row.xx)



])

}

}

//实现对名字字段的变蓝色区分,这里title 里面的字段必须和后面 params.row后面的字段一致，不然不能显示字段，在style进行设置样式style 然后在props里面定义标签的类型和大小

{

title: 'xx',

key: 'xx',

ellipsis:true,

width: 80,

render: (h, params) => {

return ('div', [

h('a', {

props: {

type: 'text',

size: 'small'

},

style: {

color: 'blue',

textDecoration: 'underline'

},

on: {

click: () => {

//实现点击用户姓名然后显示其电话号码等功能，原来是通过动态路由，现在直接写在model里面

let currenIndex = params.index;

var obj = this.xx[currenIndex];

let mouseId = obj.mouseId;

getUserInfo(mouseId).then(res=>{

this.userInfoData = res.data;

this.isShowUserInfo = true;

})

}

}

}, params.row.xx)



])

}

}

二、文件上传功能

<Upload

ref='upload'

:data='repMsg'

:on-success="handleSuccess"

:format="['xlsx']"

:max-size="10240"

multiple

:headers='token'

:before-upload="beforeUpload"

:on-error="handleError"

:on-format-error="handleFormatError"

:on-exceeded-size="handleMaxSize"

action="/plan/taskPlanInfoController/importFileData">

<Button type="ghost" icon="ios-cloud-upload-outline">上传附件</Button>

</Upload>

action 上传的地址，必填 String -
headers 设置上传的请求头部 Object {}
multiple 是否支持多选文件 Boolean false
data 上传时附带的额外参数 Object -
format 支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用 Array []
max-size 文件大小限制，单位 kb
before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传 Function -
on-progress 文件上传时的钩子，返回字段为 event, file, fileList Function -
on-success 文件上传成功时的钩子，返回字段为 response, file, fileList Function -
on-error 文件上传失败时的钩子，返回字段为 error, file, fileList Function -

on-format-error 文件格式验证失败时的钩子，返回字段为 file, fileList Function -

//下面方法可以实现将文件名称传递给后台

:before-upload="beforeUpload"

beforeUpload(file){

this.repMsg.filename = file.name;

// console.log(file)

},

//handleError感觉这个方法没什么用报错后只是显示一个错误提示又不显示报错信息，可能这里报错信息是需要自己手动添加？

//值得说的是展示上传列表和再一次点击弹出框清楚上一次的上传列表

clearFiles

清空已上传的文件列表

使用这个方法，和表单里面重置的使用方法一致，但是也有一点小问题

在再一次点击的时候清除上一次的列表内容

先在上面upload里面定义ref='upload' 然后实现重置，这里有时候this.$refs.upload.clearFiles()报错找不到，看了this.$refs.upload输出后将改为了this.$refs.upload[0].clearFiles()就可以了，不知道具体什么原因

if(this.$refs.upload==undefined){

return

}else{

this.$refs.upload.clearFiles();

}

三、实现下载功能

直接用html5 download属性 ie不支持

这里使用了window.location进行下载可以支持ie

DownloadFiles(obj){

// console.log(obj)

window.location="/xx/xx/xx?filename="+obj;

},

四、当对时间插件进行必输验证的时候报错

value.getTime() is not a function

<FormItem label="起始时间:" prop="startDatetime">

<DatePicker v-model="exportFormdata.startDatetime" type="datetime" size='small'></DatePicker>

</FormItem>

<FormItem label="截止时间:" prop="endDatetime">

<DatePicker v-model="exportFormdata.endDatetime" type="datetime" size='small'></DatePicker>

</FormItem>

     validateExport:{
         startDatetime:[
           {required:true,type:'date',message:'起始时间必填',trigger:'change'}
         ],
         endDatetime:[
           {required:true,type:'date',message:'截止时间必填',trigger:'change'}
         ]
      },

DatePicker 插件传递给后台的是utc的格式不是后台需要的2018-05-05这种格式，所以这里需要转化，

如果是在验证validate之前验证的就会报错没有getTime()这个方法，据说是由于本来时间是data的类型，但是转化后变为了string类型所以没有这个方法，那么在验证过后再转化就可以解决这个问题了

五、通过render实现将状态之间数字和中文汉字的对应

在写程序的时候难免遇到数据字典，后台只是传给前台1,2,3这种数字，但是前台展示要展示各种状态：未开始，待接收，待执行等中文。

所以先请求数据字典获取到数组var arrarparams = [{label:'未开始'，value:'1'},{label:'待接收'，value:'2'}]

然后在table columns1里面实现数据的转化，现在render里面遍历获取到当前值，然后自return中将这个值展示出来，就可以将中文转化，不会存在在请求数据后再转化的异步和同步问题，然后在编辑的时候使用select框，这样也不会存在传递给后台的是中文，而且还是数字

六、针对 iview-admin 框架 1.3.1版本中左侧菜单栏在ie11中鼠标滚动和下拉等事件不起作用的情况

首先来认识一下鼠标滚轮事件，这里也是参考看了大神的文章https://www.zhangxinxu.com/wordpress/2013/04/js-mousewheel-dommousescroll-event/

（1）onmousewheel 主要是ie和谷歌使用，直接是dom0级别的事件 DOMMouseScroll是兼容火狐浏览器的作用于Dom2级别的事件必须要用addEventListener调用

(2)但是在ie中滚轮事件e.deltaY=undefined       谷歌中e.deltaY 为固定的值向上是100的倍数  向下滑动是-100的倍数   但是在ie11中 没有delta这个属性  用了wheelDelta来替代，而且这里wheelDelta的值向上是-120的倍数  向下是120的倍数适合谷歌相反的，所以在ie中需要判断的是e.wheelDelta并且取到相反值这样才能和谷歌的鼠标滚轮事件一致

七、在使用iview导入组件的时候使用$Message时的bug

出现原因，使用Model框包裹导入组件，等到导入成功后实现以下功能

this.$Message.success("导入成功");
this.isShowImportJob = false

最后一段代码有可能不会实现，目前个人想法就是success是通过notice来的，他封装的时候使用return 的返回方法，所以有时候后面的代码就不能执行了。最好是将model框消失的代码放到上面，像下面一样就不会存在这种问题，具体可以自己操作一下

this.isShowImportJob = false

this.$Message.success("导入成功");

八、iview 2.0版本的 transfer穿梭框当通过搜索然后选择全选，但是选中的是所有的数据并不是搜索出来的数据的bug问题

1、将iview直接升级为3.0 大概看了一下源码，官方改了一个参数，然后3.0解决了这个问题。但是2.0和3.0的许多icon有差别，如果icon比较多的话要嘛慢慢改，要嘛使用下面的方法吧。想过改源码，但是iview很多方法写了但是没有放出来扩展性很差，所以我放弃了

2、引入elementui 模块单独使用elementui的穿梭框组件这个也能轻松解决问题

放两张截图瞧瞧

九、在iview中实现在dateTime类型的时间控件在选择了时分秒的时候输入框展示年月日时分秒的格式，但是如果没有选择时分秒的情况下只展示年月日。

1、最初的想法是直接将value-format改为 yy-mm-dd 的写法，但是选择时间过后还是只显示yy-mm-dd不行

2、实现对type类型通过时间的截取，当没选择时分秒的时候截取年月日显示当有时分秒的时候直接全部显示根据两个时间替换为日期类型过后的毫秒数的差做一个三元的 date 和datetime的类型选项，但是控件选择了年月日时间后直接变了，没有选择时间的选项了；然后行不通

3、另一个同事提议直接通过js更改当前input显示日期框的value来实现。据说v-model除了绑定值之外还绑定了一些特殊的属性。在这里我理解为一个验证的东西

最后写出来过后就因为一句代码查了半天，也是认识到自己对vue还是不太深入啊

代码：

<template>
    <DatePicker ref='testsome' v-model='cc'type="datetime" placeholder="Select date and time" style="width: 200px" @on-change="test"></DatePicker>
</template>
<script>
    export default {
        data(){
          return{
          cc:''
        }
        },
        methods:{
          test(value,type){
            let currentDom = this.$refs.testsome.$el.children[0].children[0].children[2];
            let dd = value.substring(0,10);
                dd = dd.replace(/-/g, '/');//直接使用2018-01-02这种格式是错误的；使用斜杠更好，ie7不支持'-'，火狐不支持'-'
            let ddDate = new Date(dd).getTime();
               value = value.replace(/-/g, '/'); 
            let modelValue = new Date(value).getTime();
            if(parseInt(modelValue-ddDate)>0){
                 //表示有选择时分秒的  应该不存在小于0 的情况吧。。。
               }else if((parseInt(modelValue-ddDate)==0)){
                 //当只选择了年月日的时候将从dom的值赋值给当前的显示的值,最后一定要绑定一个input事件，不然不显示，是v-model的底层赋值原理
                        this.$nextTick(()=>{
                           currentDom.value=currentDom.value.substring(0,10);
              　           currentDom.dispatchEvent(new Event('input'));          
                        });
               }else if(!value){
                // console.log(ddDate,modelValue,'1121')
                 //console.log('选中时间比剪切成年月日的时间小');
                    return;
               }
            //由于后台需要‘-’所以这里转化回去
            value = value.replace(/\//g, '-'); 
             this.cc = value;
            console.log(this.cc,'cc')
     
          }
        }
    }
</script>

字段命名大家就看看吧，平常自己写的就没想那么多~~~~~~~~~~~~~~~~~~~~~~~~~

alisaGreen

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
iview使用总结

一、实现table表格实现多选和指定条件复选框不能选中的效果（1）实现多选表格<Table ref="selection" @on-selection-change="changeChose" @on-select-all="selectAll" style="margin-top:6px;"@on-select="getTableChosedValue" border ...
复制链接

扫一扫

专栏目录