iview table 多选框

Question

iview第三方组件库的table组件多选框label无值回显示undefined

如何给表格控件自带的多选框附上默认值？

Answer 1

可以通过 render 属性来自定义渲染多选框列的内容，这样就可以给多选框附上默认值。示例如下：

<template>
  <Table :data="data">
    <TableColumn type="selection" :render="renderCheckbox" />
    <!-- 其他列 -->
  </Table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: 'John', age: 20, checked: true },
        { name: 'Jane', age: 22, checked: false },
        { name: 'Bob', age: 25, checked: true }
      ]
    }
  },
  methods: {
    renderCheckbox(h, params) {
      const { row } = params
      return h('Checkbox', {
        props: {
          value: row.checked
        },
        on: {
          'on-change': value => {
            row.checked = value
          }
        }
      })
    }
  }
}
</script>

在 renderCheckbox 方法中，通过 h 函数生成一个 Checkbox 组件，并将 row.checked 作为其 value 属性的值传递，这样多选框就能够显示默认的选中状态了。在多选框的 on-change 事件中，将选中状态保存到当前行的数据对象中，这样就可以在后续提交表单时获取到所有选中的行。
如果对您有帮助，请给与采纳，谢谢。