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 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
JavaScript多线程详解
Aug 12 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python文件写入write()的操作
2019/05/14 Python
Python正则表达式学习小例子
2020/03/03 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
大学军训自我鉴定
2013/12/15 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis