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修改地址栏URL参数解决url参数问题
Dec 15 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
setTimeout学习小结
Feb 08 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue中锚点的三种方法
Jul 06 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
Vue中引入svg图标的两种方式
Jan 14 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获取当前url的具体方法全面解析
2013/11/26 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
AngularJS 教程及实例代码
2017/10/23 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
win与linux系统中python requests 安装
2016/12/04 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python如何给函数库增加日志功能
2020/08/04 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
爱我中华演讲稿
2014/05/20 职场文书
党员目标管理责任书
2014/07/25 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Vue2.0搭建脚手架
2022/03/13 Vue.js