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 代码优化点滴记录
Feb 19 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
JS 数组基本用法入门示例解析
Jan 16 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反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP strripos函数用法总结
2019/02/11 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
python实现文件路径和url相互转换的方法
2015/07/06 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
部队学习十八大感言
2014/01/11 职场文书
给校长的建议书
2014/03/12 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
教师节寄语2015
2015/03/23 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
详解Python自动化之文件自动化处理
2021/06/21 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL