iView Table组件中嵌入超链接、图片、标签、div盒子、图标

---

前言

在具体的业务开发中，有时需要在表格组件中嵌入图片、标签等组件来展示数据，应用第三方UI组件库时，通常有略微差异，如element和iView（element直接在元素中嵌入组件即可实现，而iVew需要在Script里设置实现）。element只需要采用作用域插槽即可实现这有效果（element可参考这篇文章），本篇文章为大家介绍iView实现的方式。

---

一、iView Table组件基本使用

Table组件概述：主要用于展示大量结构化数据，支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。

以下是Table组件基本使用的代码：

<template>
    <Table :columns="columns1" :data="data1"></Table>
    // columns：表格列的配置描述，具体项见后文
    // data：显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称
</template>
<script>
    export default {
        data () {
            return {
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    }
                ]
            }
        }
    }
</script>

二、iView Table组件中嵌入超链接、图片、div盒子、标签

效果图如下：

以下是Table组件中嵌入超链接的代码：

<template>
	<Table border :columns="bgmColumns" :data="bgmList" :loading="loading" height='500'>
	// 使用作用域插槽将每一条数据ID与其索引相互关联
        <template slot-scope="{ row }" slot="id">
          <strong>{{ row.id }}</strong>
        </template>
        // 添加操作栏
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="showEditModel(row.id)">编辑</Button>
          <Button type="error" size="small" @click="removeBgmById(row.id)">删除</Button>
        </template>
	</Table>
</template>

<script>
  export default {
    data() {
      return {
        //  columns：表格列的配置描述，此处即为歌曲列表每一列的表头信息以及展示内容的相关配置
        bgmColumns: [
        // 此处为表格最前面的索引值，长度50px，数据居中
        {
            type: 'index',
            width: '50',
            align: 'center'
          },
          {
            title: '歌曲地址',
            key: 'url',
            align: 'center',
            render: (h, params) => {
            // 设置为<a>标签
              return h('a', {
              // 此处为歌曲地址的超链接样式设置（添加下划线）
                style: {
                  textDecoration: 'underline'
                },
                attrs: {
                  href: params.row.url, target: '_blank'
                }
              }, params.row.url)
            }
          },
          {
            title: '唱片图片',
            width: '140',
            key: 'cover',
            align: 'center',
            render: (h, params) => {
            // 设置为<img>
              return h('img', {
              // 此处为歌曲图片样式配置
                style: {
                  'width': '100px',
                  'height': '100px',
                  'border-radius': '50%'
                },
                attrs: {
                  src: params.row.cover
                }
              })
            }
          },
          {
            title: '播放时主题色',
            key: 'theme',
            align: 'center',
            render: (h, params) => {
            // 此处为div盒子样式配置（background的属性值从后台数据中取回，需使用字符串拼接的方式实现）
              return h('div', {
                style: 'width: 100%;height: 100px;' + 'background: ' + params.row.theme,
              })
            }
          },
          {
            title: '标签名称',
            key: 'labelName',
            align: 'center',
            render: (h, params) => {
              let arr = (params.row.labelName || "").split("\n")
              return h('div', arr.map(function(item, index) {
              // 设置为Tag标签
                return h('Tag', {
                  domProps: {
                    innerHTML: item || "无"
                  }
                })
              }))
            }
          }，
          // 通过if else ，根据数据的不同，用不同的图标展示性别
          {
            title: '性别',
            key: 'gender',
            align: 'center',
            render: (h, params) => {
              if (params.row.gender == '男') {
                return h('div', [
                  h(
                    'Icon', {
                      props: {
                        type: 'ios-male'
                      }
                    })
                ])
              } else {
                return h('div', [
                  h(
                    'Icon', {
                      props: {
                        type: 'ios-female'
                      }
                    })
                ])
              }
            }
          }
        ]
      }
    }
  }
  </script>