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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
常用DOM整理
Jun 16 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
Vue实现图书管理案例
Jan 20 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 变量类型的强制转换
2009/10/23 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
MSN消息提示类
2006/09/05 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
layui实现数据分页功能
2019/07/27 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python音频处理的示例详解
2020/12/23 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
法律进学校实施方案
2014/03/15 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
Python中for后接else的语法使用
2021/05/18 Python