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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
一分钟理解js闭包
May 04 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
js中的面向对象入门
Mar 06 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
讲解vue-router之什么是嵌套路由
May 28 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
关于vue面试题汇总
2018/03/20 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
微信小程序 如何获取网络状态
2019/07/26 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
幼儿园家长评语
2014/02/10 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
《称象》教学反思
2014/04/25 职场文书
村级换届选举方案
2014/05/10 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
清洁工岗位职责
2015/02/13 职场文书
亮剑精神观后感
2015/06/05 职场文书
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers