iview的table组件给指定单元格添加功能按钮

最新推荐文章于 2025-04-11 15:47:45 发布

wakakaHBW

最新推荐文章于 2025-04-11 15:47:45 发布

阅读量3.1k

点赞数 1

分类专栏： vue 文章标签： vue iview Iview 表格编辑

本文链接：https://blog.youkuaiyun.com/wakaka112233/article/details/107187814

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在IView的Table组件中特定单元格添加按钮，实现数据的加减控制。通过使用render属性自定义单元格内容，演示了按钮点击事件处理及数据更新的完整过程。

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

1. 需求

使用的IView的Table组件，数据都是绑定好自动渲染的，想要给指定的单元格添加两个按钮，实现单元格内的数据加减控制，效果图如下
i-table组件单元格添加按钮

2. 问题

因为iview的组件数据都是绑定好自动渲染，因此想要给指定的单元格增加两个按钮，却是不容易操作。
查询官网的说明，以及各个大佬博客的分享，最终使用render 解决了问题。

3. 解决方案

使用render 来渲染自定义组件
template

              <template>
                  <i-table border :columns="columns1" :data="data1" @on-row-click='openLibraryContactDetail'></i-table>
              </template>

data

  data () {
    return {
      columns1: [
        {
          title: '作者',
          key: 'Author'
        },
        {
          title: '出版社',
          key: 'Publisher'
        },
        {
          title: '出版地',
          key: 'PubPlace'
        },
        {
          title: '总数量',
          key: 'TotalQty',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginLeft: '5px'
                },
                on: {
                  click: e => {
                    e.stopPropagation() // 阻止冒泡事件
                    this.loading = true
                    let userInfo = sessionStorage.getItem('userInfo')
                    let userData = JSON.parse(userInfo)
                    // 下面是我调用的自己的接口，当然 也可以执行其它的函数
                    AdjustBookInventory({
                      StoreId: userData.StoreId,
                      StBookId: params.row.Id,
                      BookQty: -1
                    })
                      .then(res => {
                        this.loading = false
                        params.row.TotalQty = params.row.TotalQty - 1
                      })
                      .catch(err => {
                        console.log(err)
                      })
                  }
                }
              }, '-'),
              h('span', {
                style: {
                  display: 'inline-block',
                  width: '20px',
                }
              }, params.row.TotalQty),
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  position: 'relative'
                },
                on: {
                  click: e => {
                    e.stopPropagation() // 阻止冒泡事件
                    this.loading = true
                    let userInfo = sessionStorage.getItem('userInfo')
                    let userData = JSON.parse(userInfo)
                    AdjustBookInventory({
                      StoreId: userData.StoreId,
                      StBookId: params.row.Id,
                      BookQty: +1
                    })
                      .then(res => {
                        this.loading = false
                        params.row.TotalQty = params.row.TotalQty + 1
                      })
                      .catch(err => {
                        console.log(err)
                      })
                  }
                }
              }, '+')
            ])
          }
        }
      ],

其中render 的参数 params 是当前行的数据 click: e e是事件自带参数，触发点击事件就会产生e。

e.stopPropagation() 是为了阻止冒泡事件，点击按钮时候，不会触发iview的table组件的@on-row-click事件

其中render 的简单形式如下所示

render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small'
                },
                on: {
                  click: e => {
                  console.log('-')
              }, '-'),
              h('span', {
                style: {
                  width: '20px',
                }
              }, 666),
              h('Button', {
                props: {
                  size: 'small'
                },
                on: {
                  click: e => {
                  console.log('+')
                }
              }, '+')
            ])
          }