Element-plus虚拟化表格（JS版）-带单选框

最新推荐文章于 2024-04-04 18:58:19 发布

Charis-Cai

最新推荐文章于 2024-04-04 18:58:19 发布

阅读量603

点赞数

分类专栏： vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_36373873/article/details/131985223

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

大佬可以跳过~~~

DOM:（这个不用多说，官网有~）

<el-table-v2 :columns="columns" :data="list" :width="1150" :height="550" fixed />

JS:

const columns = [
  {
    width: 60,
    cellRenderer: ({ rowData }) => // 注意！这儿没有大括号！
      h(ElRadio, { // 需要引入element-plus的单选框
        label: rowData.name, // 为了使选中状态回显
        modelValue: state.templateRadio, // state.templateRadio为选中的值
        'onUpdate:modelValue': () => (state.templateRadio = rowData.name),
        onChange: (val) => {
          state.templateRadio = val
          // 选中单选框要处理的逻辑写在这儿
        }
      })
  },
  { title: '序号', key: 'index', cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`, width: 80 },
  { title: '名称', key: 'name', dataKey: 'name', width: 400 },
  { title: '描述', key: 'desc', dataKey: 'desc', width: 400 }
]

开始遇到的问题是可以点击能拿到值但是不能回显，所以加上了label。
又学到了。