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 自定义函数缺省值的设置方法
May 05 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
原生javascript实现分页效果
Apr 21 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
微信小程序实现文字无限轮播效果
Dec 28 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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者的疑难问答(1)
2006/10/09 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
document.compatMode介绍
2009/05/21 Javascript
javascript 写类方式之七
2009/07/05 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
django 多数据库配置教程
2018/05/30 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python如何输出整数
2020/06/07 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
商业项目策划方案
2014/06/05 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers