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 版
Mar 24 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
JS实现图片切换效果
Nov 17 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 file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php实现可运算的验证码
2015/11/10 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
Python+PIL实现支付宝AR红包
2018/02/09 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
shell程序中如何注释
2012/01/28 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
学雷锋宣传标语
2014/06/25 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年商场工作总结
2015/04/27 职场文书
新党员入党决心书
2015/09/22 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android