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面向对象之体会[总结]
Nov 13 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
canvas实现图像截取功能
Feb 06 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 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网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
Jquery submit()无法提交问题
2013/04/21 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python制作抖音代码舞
2019/04/07 Python
Django REST framework内置路由用法
2019/07/26 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
总务岗位职责
2013/11/19 职场文书
预备党员公开承诺书
2014/05/28 职场文书
离婚协议书范本样本
2014/08/19 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle