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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
js中function()使用方法
Dec 24 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
JavaScript实现复选框全选功能
Apr 11 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实现二分查找算法代码分享
2011/06/24 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
解决PyCharm中光标变粗的问题
2017/08/05 Python
linux 下selenium chrome使用详解
2020/04/02 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
资深地理教师自我评价
2013/09/21 职场文书
建筑个人求职信范文
2014/01/25 职场文书
员工培训协议书
2014/09/15 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
护士先进个人总结
2015/02/13 职场文书
合同审查法律意见书
2015/06/04 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android