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操作ajax返回的json的注意问题!
Feb 23 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
vue-router 学习快速入门
Mar 01 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
vue+element实现打印页面功能
May 20 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
vue引入静态js文件的方法
Jun 20 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+DBM的同学录程序(2)
2006/10/09 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
python根据文件大小打log日志
2014/10/09 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python线程池如何使用
2020/05/28 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
会计学自我鉴定
2014/02/06 职场文书
大学专科自荐信
2014/06/17 职场文书
工作散漫检讨书
2014/09/16 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
优秀高中学生评语
2014/12/30 职场文书
倡议书作文
2015/01/19 职场文书
千手观音观后感
2015/06/03 职场文书
导游词之日本富士山
2020/01/06 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题