iview的table显示图片和显示超链接

最新推荐文章于 2023-11-27 22:58:35 发布

hyblzcf

最新推荐文章于 2023-11-27 22:58:35 发布

阅读量2.8k

点赞数 2

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/zcfzfc123456789/article/details/101292764

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在iview的表格组件中嵌入图片和超链接，包括具体的实现方法和展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示图片

<template>
    <div class='bannerPage'>
      <Table border ref="tables" :columns="columns" :data="tableData">
          <template slot-scope="{ row }" slot="action" >
            <Button  size="small" class='btn' @click="editFn(row)">编辑</Button>
            <Button  size="small" class='btn' @click="deleteFn(row)">删除</Button>
          </template>
      </Table>
      <div class='ticp'>小贴示：轮播图可设置3-6张，至少设置三张轮播图才会生效奥，轮播图小于三张会恢复默认图片！</div>
    </div>
</template>
export default {
  name: 'banner_set_page',
  data () {
    return {
      columns: [
        { title: '序列号', type: 'index', align: 'center', width: '80' },
        { title: '名称', key: 'name', align: 'center' },
        {
          title: '图片',
          key: 'image',
          align: 'center',
          render: (h, params) => {
            return h('img', {
              style: {
                'width': '60px',
                'height': '60px',
                'padding': '10px 0px'
              },
              attrs: { src: params.row.image }
            })
          }
        },
        { title: '链接类型', key: 'type', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      tableData: [
        { name: '微信图片_20190805211712.png', image: 'http://static.upedu.cc/upload/Dev/logo/20190805/1565012617678291821.png', type: 'URL' },
        { name: '轮播图.png', image: 'http://static.upedu.cc/upload/Dev/logo/20190806/1565054479541252132.png', type: 'URL' },
        { name: '2.读书会导师.jpg', image: 'http://static.upedu.cc/upload/Dev/logo/20190801/1564644328012569123.jpg', type: 'URL' },
        { name: '微信图片_20190805211712', image: 'http://static.upedu.cc/upload/Dev/logo/20190805/1565012496446780530.png', type: 'URL' },
        { name: '徐佳璐.png', image: 'http://static.upedu.cc/upload/Dev/logo/20190806/1565054492245456236.png', type: 'URL' }
      ]
    }
  },
  methods: {
    editFn (row) {
      console.log(row)
    },
    deleteFn (row) {
      console.log(row)
    }
  }
}

展示效果
在这里插入图片描述

显示超链接

<template>
    <div class='homePage'>
      <Table border ref="tables" :columns="columns" :data="tableData">
          <template slot-scope="{ row }" slot="action" >
            <Button  size="small" class='btn' @click="editFn(row)">编辑</Button>
            <Button  size="small" class='btn' @click="deleteFn(row)">删除</Button>
          </template>
      </Table>
      <div class='ticp'>小贴示：首页视频最多添加5个！</div>
    </div>
</template>
<script>
export default {
  name: 'home_set_page',
  data () {
    return {
      columns: [
        { title: '序列号', type: 'index', align: 'center', width: '80' },
        { title: '视频名称', key: 'name', align: 'center' },
        {
          title: '视频链接',
          key: 'url',
          align: 'center',
          width: '500',
          render: (h, params) => {
            return h('a', {
              attrs: { href: params.row.url, target: '_blank', title: params.row.url }
            }, params.row.url)
          }
        },
        { title: '跳转链接', key: 'toUrl', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      tableData: [
        { name: '宣传片', url: 'http://touch.hopechina.cc/ymcxh_11356_video_1565005763322.mp4', type: 'URL', toUrl: '--' }
      ]
    }
  },
  methods: {
    editFn (row) {
      console.log(row)
    },
    deleteFn (row) {
      console.log(row)
    }
  }
}
</script>

展示效果

在这里插入图片描述