iview table中使用radio的单选（iview 表格单选按钮功能的实现）

最新推荐文章于 2026-05-11 11:16:25 发布

原创最新推荐文章于 2026-05-11 11:16:25 发布 · 1w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

iview

13 篇文章

订阅专栏

本文介绍了一个使用Vue框架实现的表格组件自定义渲染的例子。通过定义currentid变量和chose列，实现了表格中某一行的选择状态切换。具体实现方式是利用Vue的render函数和Radio组件，根据当前行的idjishi属性与currentid的比较结果来决定是否显示选中状态。

第一步先定义个

currentid：0

然后

{
            title: '选择',
            key: 'chose',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.idjishi;
              let flag = false;
              if (this.currentid === id) {
                flag = true
              } else {
                flag = false
              }
              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      self.currentid = id
                      this.id_jishi = params.row.idjishi
                    }
                  }
                })
              ])
            }
          },