ZhaoKai 's 分享

  • 文章

  • 搜索
Postgresql Homebrew brew Mac VisualGC jvisualvm 监控 远程 jvm VMware iView Vue Spring源码 Spring Gradle

iView 中 Table 组件的 render 方法的简介

发表于 2020-05-10 | 分类于 Vue | 0 | 阅读次数 220

开始

今天学习了一下前端的内容, 在做一个页面时用到了 iView 的 Table 组件, 其中需要自定义渲染列, 在此小记一下.

介绍

render 函数是为了在 Table 中自定义渲染列数据, 下面用例子进行说明.

image.png

如上图所示, 我想使用 render 函数在最后一列的操作列加上三个图标按钮, 代码应该这么写:

{
    title: '操作', key: 'action',
    render: (h, params) => {
      return h('div', {}, [
        // 编辑
        h('Icon', {
          props: {
            type: 'ios-create',
            color: '#2d8cf0',
            size: '18',
          },
          style: {
            cursor: 'pointer',
            margin: '4px'
          }
        }),
        // 删除
        h('Icon', {
          props: {
            type: 'ios-trash',
            color: '#ed4014',
            size: '18',
          },
          style: {
            cursor: 'pointer',
            margin: '4px'
          }
        }),
        // 设置
        h('Icon', {
          props: {
            type: 'ios-settings',
            color: '#2d8cf0',
            size: '18',
          },
          style: {
            cursor: 'pointer',
            margin: '4px'
          }
        })
      ]);
    }
}

另外一个要实现的功能是点击标题跳转到浏览器的新标签页, 也就是说将标题这一列渲染为 a 标签:

{
  title: '标题', key: 'title',
  render: (h, params) => {
    return h('a', {
      attrs: {
        target: '_blank',
        href: 'https://www.baidu.com/'
      }
    }, params.row.title);
  }
}

我自己的理解

render 函数中的 h 参数是一个函数, 它有三个参数:

1. 渲染后的元素名称

比如标题我想将它渲染为一个 a 标签, 那么第一个参数就是 a(String 类型).

2. 渲染后的元素的属性

其中属性又分为标签本身的属性, iView 封装的属性; 还有就是 style 样式也可以写在这里面.

  • 标签自己本身的属性, 比如 a 标签的 target 和 href 属性, img 的 src 属性.
  • iView 封装的属性, 需要看 iView 具体的组件, 比如: Input 组件的 type 属性等等.
  • style 样式, 不需要多说, 属性名全部是驼峰式写法.

我只截取 render 函数作说明:

// 1.
render: (h, params) => {
  return h('a', {
    // attrs 是标签自己本身的属性
    attrs: {
      target: '_blank',
      href: 'https://www.baidu.com/'
    }
  }, '元素内容');

// 2.
render: (h, params) => {
  return h('Input', {
    // props 中是 iView 的属性
    props: {
      type: 'primary'
    }
  }, '元素内容');
}

// 3.
render: (h, params) => {
  return h('a', {
    attrs: {
      target: '_blank',
      href: 'https://www.baidu.com/'
    },
    // style 中是自定义的 css 样式
    style: {
      color: 'white',
      // 这里需要是驼峰式写法
      marginLeft: '5px'
    }
  }, '元素内容');

3. 元素中的内容

当然可以是文本, 也可以是HTML(HTML依然可以嵌套一个或者多个 h 函数).

render: (h, params) => {
  let els = [
    h('Button', {
      // 样式省略 ...
    }, '编辑'),
    h('Button', {
      // 样式省略 ...
    }, '删除'),
  ];
  return h('div', {
    // 样式省略 ...
  }, els);

上面我为了看的更清楚, 将子元素单独提出来作为 els 变量.

这就是我学习到的内容.
  • 本文作者: Zhao Kai
  • 本文链接: http://blog.anyexception.com/archives/iview中table组件的render方法的简介
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处!
# Postgresql # Homebrew # brew # Mac # VisualGC # jvisualvm # 监控 # 远程 # jvm # VMware # iView # Vue # Spring源码 # Spring # Gradle
spring源码之导入spring-framework项目
VMware-没有界面的centos虚拟机如何安装VMware Tools
  • 文章目录
  • 站点概览
Zhao Kai

Zhao Kai

努力的学习...

8 日志
8 分类
15 标签
RSS
E-mail
Creative Commons
© 2021 Zhao Kai
由 Halo 强力驱动
|
主题 - NexT.Gemini v5.1.4