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 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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 SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python获取list下标及其值的简单方法
2016/09/12 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
个人学习群众路线心得体会
2014/11/05 职场文书