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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
初识javascript 文档碎片
Jul 13 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
详解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 strtok()函数的优点分析
2010/03/02 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python实现教务管理系统
2018/03/12 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
二年级数学教学反思
2014/01/21 职场文书
国培教师自我鉴定
2014/02/12 职场文书
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers