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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
react 项目中引入图片的几种方式
Jun 02 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扩展函数
2006/10/09 PHP
Email+URL的判断和自动转换函数
2006/10/09 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
帝国cms目录结构分享
2015/07/06 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
使用python实现生成用户信息
2017/03/20 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
python实现flappy bird小游戏
2018/12/24 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
大学新生军训自我鉴定范文
2014/09/13 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
后备干部推荐材料
2014/12/24 职场文书
跑出一片天观后感
2015/06/08 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
docker-compose部署Yapi的方法
2022/04/08 Servers