Iview Table组件中各种组件扩展的使用


Posted in Javascript onOctober 20, 2018

一、Iview Table 组件 多选框选中和禁选设置

Table添加多选框

通过给 columns 数据设置一项,指定  type: 'selection' ,即可自动开启多选功能。

正确使用好以下事件,可以达到需要的效果:

  • @on-select ,选中某一项触发,返回值为  selection  和  row ,分别为已选项和刚选择的项。
  • @on-select-all ,点击全选时触发,返回值为  selection ,已选项。
  • @on-selection-change ,只要选中项发生变化时就会触发,返回值为  selection ,已选项。
<template>
 <div>
  <Table ref="selection" :columns="columns" :data="data" @on-selection-change="selectChange"></Table>
 </div>
</template>

<script>
export default {



data () {
  


return {





columns: [ { type: 'selection', width: 60, align: 'center' }, { title: 'Name', key: 'name' }]




}



},



methods: {




selectChange: function (data) {





console.log(data[i].name)




}



}

</script>

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

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

例如:

for (var i = 0; i < res.data.list.length; i++) {
 if (res.data.list[i].status === '1') {
  res.data.list[i]._disabled = true // 设置复选框禁用
  res.data.list[i]._checked= true // 设置复选框选中状态
 }
}

二、Iview Table 组件中点击Icon弹出Poptip的写法

1.图标禁用方式

{
 title: '撤销',
 key: 'operate',
 width: 70,
 fixed: 'right',
 render: (h, params) => {
  if (params.row.status === '1') { // 选中当前行信息
   return h('div', [
    h('div', [
     h('Poptip', {
      props: {
       confirm: true,
       title: '确定要撤销吗!'
      },
      on: {
       'on-ok': () => {
        this.cancelFunction(params.index)
       }
      }
     }, [
      h('Button', {
       props: {
        shape: 'circle',
        icon: 'md-return-left'
       }
      })
     ])
    ])
   ])
  } else {
   return h('div', [
    h('Button', {
     props: {
      shape: 'circle',
      icon: 'md-return-left',
      disabled: true // 禁用图标
     }
    })
   ])
  }
 }
},

2.图标禁用方式

{
 title: '修改',
 key: 'operate',
 fixed: 'right',
 width: 70,
 textAlign: 'right',
 render: (h, params) => {
  return h('div', [
   h('Button', {
    props: {
     shape: 'circle',
     icon: 'ios-paper-plane',
     disabled: params.row.status !== '0'
    },
    on: {
     click: () => {
      this.editFunction(params.index)
     }
    }
   })
  ])
 }
},

三、四元运算符 : 多个三元运算符 嵌套

var state = null;

var display_state = (state == null ? "未用" : (state == true ? "在用" : "停用"))

//display_state
//"未用"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 #Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 #Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 #Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 #Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 #Javascript
vue 项目地址去掉 #的方法
Oct 20 #Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
JS实现self的resend
2010/07/22 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
js操作二进制数据方法
2018/03/03 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Python isinstance函数介绍
2015/04/14 Python
Python 3中的yield from语法详解
2017/01/18 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python实现Zabbix-API监控
2018/09/17 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
酒店服务与管理毕业生求职信
2013/11/02 职场文书
网络编辑职责
2014/03/01 职场文书
申报优秀教师材料
2014/12/16 职场文书
2016年教代会开幕词
2016/03/04 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis