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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
小程序自定义日历效果
Dec 29 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 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判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
Python中encode()方法的使用简介
2015/05/18 Python
对python中Json与object转化的方法详解
2018/12/31 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
思想专业自荐信范文
2013/12/25 职场文书
制作部班长职位说明书
2014/02/26 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
要账委托书范本
2014/09/15 职场文书
关于运动会的广播稿
2014/09/22 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书