iview table 去掉全选按钮

iview table 是一款基于 Vue.js 的 UI 组件，用于展示数据表格。要去掉全选按钮，需要对表格的配置进行修改。可以通过在配置项中设置 `show-header-check` 为 `false` 来隐藏全选按钮。下面是示例代码：

<template>
  <div>
    <Table :data="tableData" :columns="columns" :show-header-check="false"></Table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [...], // 表格数据
        columns: [...] // 列配置
      };
    }
  };
</script>

以上代码中，`show-header-check` 属性被设置为 `false` ，这样就可以隐藏表格头部的全选按钮。你可以根据实际需求，自定义表格的样式和配置，以满足你的需求。

相关问题

iview Table组件插入全选全不选，不使用type: "selection"属性

可以使用自定义列来实现iview Table组件的全选和全不选功能，具体步骤如下：

1. 在columns数组中添加一个自定义列，如下所示：

columns: [
  {
    title: '',
    key: 'selectAll',
    width: 60,
    render: (h, params) => {
      return h('Checkbox', {
        props: {
          value: this.checkAll,
          indeterminate: this.indeterminate
        },
        on: {
          'on-change': () => {
            this.checkAll = !this.checkAll;
            this.$refs.table.clearSelection();
          }
        }
      })
    }
  },
  // 其他列
]

2. 在data中添加一个checkAll属性和一个indeterminate属性，用于控制全选框的状态和样式：

data () {
  return {
    checkAll: false,
    indeterminate: false,
    // 表格数据
    tableData: [
      // 数据内容
    ]
  }
},

3. 在表格的selection-change事件中，根据选中的行数来更新全选框的状态：

onSelectionChange (selection) {
  if (selection.length === 0) {
    this.checkAll = false;
    this.indeterminate = false;
  } else if (selection.length === this.tableData.length) {
    this.checkAll = true;
    this.indeterminate = false;
  } else {
    this.checkAll = false;
    this.indeterminate = true;
  }
}

这样就可以实现iview Table组件的全选和全不选功能了。

iview Table组件插入全选全不选单选等，不使用type: "selection"属性

如果你不想使用 `type: "selection"` 属性，你可以使用 iView Table 组件的 `render` 功能来自定义表格列的渲染方式，从而实现全选、全不选、单选等功能。

具体实现方法如下：

1. 在 `columns` 中添加渲染函数，例如：

columns: [
  {
    title: '姓名',
    key: 'name',
    render: (h, params) => {
      return h('span', params.row.name)
    }
  },
  {
    title: '性别',
    key: 'sex',
    render: (h, params) => {
      return h('span', params.row.sex)
    }
  },
  {
    title: '操作',
    key: 'action',
    render: (h, params) => {
      return h('div', [
        h('Button', {
          props: {
            type: 'primary',
            size: 'small'
          },
          style: {
            marginRight: '5px'
          },
          on: {
            click: () => {
              // 单选操作
              console.log('单选：', params.row)
            }
          }
        }, '选择')
      ])
    }
  }
]

2. 在表格中添加全选、全不选等操作按钮，例如：

<template>
  <div>
    <Button type="primary" size="small" @click="selectAll">全选</Button>
    <Button type="primary" size="small" @click="unselectAll">全不选</Button>
    <Table :columns="columns" :data="data"></Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        },
        {
          name: '李四',
          sex: '女'
        },
        {
          name: '王五',
          sex: '男'
        }
      ],
      selectedData: []
    }
  },
  methods: {
    selectAll() {
      this.selectedData = this.data
    },
    unselectAll() {
      this.selectedData = []
    }
  },
  computed: {
    columns() {
      const columns = [...yourColumnsArray]

      // 添加复选框列
      columns.unshift({
        type: 'selection',
        width: 60,
        align: 'center'
      })

      return columns
    }
  }
}
</script>

通过添加自定义的渲染函数和操作按钮，可以实现不使用 `type: "selection"` 属性的全选、全不选、单选等功能。