antd vue table跨行合并单元格,并且自定义内容实例


Posted in Javascript onOctober 28, 2020

ant-design-vue版本:~1.3.8

需求:表格实现跨行合并,并且在合并完的单元格中显示图片

效果图:

antd vue table跨行合并单元格,并且自定义内容实例

源码:

export default {
  data() {
    return {
      pic95: require('@/assets/produit/95.png'),
      pic99: require('@/assets/produit/99.png'),
      varTable: {
        cloumns: [
          {
            title: '置信度',
            dataIndex: 'confidence ',
            class: 'confidence',
            customRender: (value, row, index) => {
              let obj = {
               children: '',
               attrs: {}
              }
              if (index === 0) {
               obj = {
                children: <div class="risk-pic"><img src={this.pic95} /></div>,
                attrs: { rowSpan: 4 }
               }
              }
              if (index === 4) {
                obj = {
                children: <div class="risk-pic"><img src={this.pic99} /></div>,
                attrs: { rowSpan: 4 }
                }
              }
              if ([1, 2, 3, 5, 6, 7].indexOf(index) !== -1) {
               obj.attrs.colSpan = 0
              }
              return obj
            }
          },
          {
           title: '天数',
           dataIndex: 'window_length',
           width: '25%',
           customRender: (text) => text + '日'
          },
          {
           title: 'VaR(万元)',
           dataIndex: 'var',
           width: '25%'
          },
          {
           title: 'VaR/净资产',
           dataIndex: 'var_rate',
           width: '25%',
           customRender: (text) => fmtRatio(text, 2)
          }
        ],
        data: [
          {window_length: 1, var: 151.69, var_rate: 0.01858},
          {window_length: 5, var: 298.94, var_rate: 0.03661},
          {window_length: 10, var: 416.70, var_rate: 0.05104},
          {window_length: 20, var: 576.04, var_rate: 0.07055},
          {window_length: 1, var: 370.64, var_rate: 0.045398},
          {window_length: 5, var: 463.33, var_rate: 0.056751},
          {window_length: 10, var: 632.91, var_rate: 0.077523},
          {window_length: 20, var: 1233.95, var_rate: 0.15114}
        ]
      }
    }
  },
  methods:{
    // 百分数设置
    fmtRatio(val, index, def) {
      // index默认值为2
      var index = arguments[1] ? arguments[1] : 2
      if (val == null || isNaN(val) || typeof (val) === 'string' && val === '') {
        return def || '--'
      }
      var ratio = (val * 100).toFixed(index)
      return ratio + '%'
    }
  }
}

导入图片的方式还有

import pic95 from '@/assets/produit/95.png'

import pic99 from '@/assets/produit/99.png'

如果有问题,欢迎提出,一起交流~~!

补充知识:ant-design vue table 可选列、自定义列实现

实现ant-design for vue 自定义列实现。点击按钮,弹窗显示所有列的checkbox,选择checkbox,确定即可实现自定义列。先上代码

<script>
/**
 * 该组件为实现table可选列。
 * 具体操作见下方注释。
 * 全部集成原a-table功能,使用方式与原a-table完全相同,扩展增加了可选列功能
 * 该组件已注册至全局,使用方式只需将a-table变为zyx-table即可,等等一系列原写法不变,即可增加该功能.
 * 采用rander函数模式写,为了实现a-table中slot可动态。
 */
export default {
 name: 'Table',
 data () {
  return {
   modalVisible: false, // 弹窗
   columns: [], // 表格的列,根据条件来操作该字段
   selectList: [], // 已选择的列
   temporarySelectData: [], // 暂时选择的列,点击checkbox暂存到该字段,点确定同步到selectList
   checkboxList: []// checkbox的list,也做总数据来使用
  }
 },
 mounted () {
  /**
   * 挂载后,将原columns复制到本页columns,checkboxList
   *     将selectList赋值全选状态
   */
  this.columns = this.deepClone(this.$attrs.columns)
  this.checkboxList = this.deepClone(this.$attrs.columns)
  this.selectList = this.columns.map(ele => ele.dataIndex)
 },
 methods: {
  /**
   * 打开modal,将checkbox默认值或者是选择值(暂存)重新赋值
   */
  handelOpenSelect () {
   this.temporarySelectData = this.deepClone(this.selectList)
   this.modalVisible = true
  },
  /**
   * 点击确定,将暂存值赋值(temporarySelectData)给已选择的列(selectList)
   * 将列(columns)根据已选择的列(selectList)筛选出来
   */
  handleOk () {
   this.selectList = this.deepClone(this.temporarySelectData)
   this.modalVisible = false
   this.columns = this.checkboxList.filter(ele => this.selectList.includes(ele.dataIndex))
  },
  handleCancel () {
   this.modalVisible = false
  },
  handelChange (e) {
   this.temporarySelectData = this.deepClone(e)
  },
  deepClone (target) {
   let result
   if (typeof target === 'object') {
    if (Array.isArray(target)) {
     result = []
     for (const i in target) {
      result.push(this.deepClone(target[i]))
     }
    } else if (target === null) {
     result = null
    } else if (target.constructor === RegExp) {
     result = target
    } else {
     result = {}
     for (const i in target) {
      result[i] = this.deepClone(target[i])
     }
    }
   } else {
    result = target
   }
   return result
  }
 },
 render () {
  const props = { ...this.$attrs, ...this.$props, ...{ columns: this.columns } }
  const on = { ...this.$listeners }

  const slots = Object.keys(this.$slots).map(slot => {
   return (
    <template slot={slot}>{ this.$slots[slot] }</template>
   )
  })

  const table = (
   <a-table props={props} scopedSlots={ this.$scopedSlots } on={on} ref="zyxTable">
    {slots}
   </a-table>
  )

  const changeDiv = (
   <a-button class="select-columns" size="small" onClick={this.handelOpenSelect}>列</a-button>
  )

  const checkboxArr = []
  for (let i = 0; i < this.checkboxList.length; i++) {
   checkboxArr.push(<a-col span={8}><a-checkbox value={this.checkboxList[i].dataIndex}>{this.checkboxList[i].title}</a-checkbox></a-col>)
  }
  const modal = (
   <a-modal
    title="设置列"
    visible={this.modalVisible}
    onOk={this.handleOk}
    onCancel={this.handleCancel}>
    <a-checkbox-group value={this.temporarySelectData} onChange={this.handelChange}>
     <a-row>
      {checkboxArr}
     </a-row>
    </a-checkbox-group>
   </a-modal>
  )

  return (
   <div class="zyx-table">
    { table }
    { changeDiv }
    { modal }
   </div>
  )
 }
}
</script>
<style lang="less" scoped>
.zyx-table{
 position: relative;
 margin-top: 20px;

 .select-columns{
  position: absolute;
  right: 0;
  top: -30px;
 }
}

.ant-row{
 width: 100%;

 .ant-col-8{
  margin-bottom: 10px;
 }
}

.ant-checkbox-group{
 width: 100%;
}
</style>

该组件二次封装了a-table,集成原a-table所有方法

使用方法,在全局注册该组件,将原a-table替换为zyx-table即可实现。

将原标签替换为rander函数,是为了实现slot动态传入的效果。

有疑问或者更好的建议,欢迎光临思密达。github传送门

以上这篇antd vue table跨行合并单元格,并且自定义内容实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe父页面获取子页面参数的方法
Feb 21 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
js 实现碰撞检测的示例
Oct 28 #Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 #Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 #Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 #Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 #Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
用js实现放大镜效果
Oct 28 #Javascript
You might like
php的一个登录的类 [推荐]
2007/03/16 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
javascript表单正则应用
2017/02/04 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
学校介绍信范文
2014/01/14 职场文书
教师师德演讲稿
2014/05/06 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
无罪辩护词范文
2015/05/21 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
PHP解决高并发问题
2021/04/01 PHP
MySQL 数据类型选择原则
2021/05/27 MySQL
Python基于百度AI实现抓取表情包
2021/06/27 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫