iview table 多选框

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

img

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

可以通过 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 事件中，将选中状态保存到当前行的数据对象中，这样就可以在后续提交表单时获取到所有选中的行。
如果对您有帮助，请给与采纳，谢谢。

iView的Table组件在多选框的标签上显示"undefined"，可能是因为未设置 label 属性或设置的 label 值为 undefined。要解决这个问题，可以在 Table 的 column 配置项中的多选框配置项（type: 'selection'）中设置 label 属性，例如：

<template>
  <Table :columns="columns" :data="data" row-key="id" />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          type: 'selection',
          label: '',
        },
        {
          title: 'Name',
          key: 'name',
        },
        {
          title: 'Age',
          key: 'age',
        },
        {
          title: 'Address',
          key: 'address',
        },
      ],
      data: [
        {
          id: 1,
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
        },
        {
          id: 3,
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
        },
      ],
    };
  },
};
</script>

在上面的代码中，将多选框的标签（label）设置为空字符串，这将使多选框不显示 "undefined"，而是只显示一个空的复选框。如果需要显示标签，可以将 label 属性设置为所需的标签字符串。