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 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 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
推荐文章系统(一)
2006/10/09 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP实现的策略模式示例
2019/03/20 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
js选择器全面解析
2016/06/27 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Vue指令指令大全
2019/02/09 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python 递归调用返回None的问题及解决方法
2020/03/16 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
经典洗发水广告词
2014/03/13 职场文书
总经理任命书
2014/03/29 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
前台接待员岗位职责
2015/04/15 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技