kvuse

Appearance

Return to top
On this page

BatchTable 批量表格

TIP

表格带有分页，如果设置total大于10，会显示分页，如果只有一页数据，分页不显示

批量表格，带有多选框，如果使用一般的表格，建议使用Table 表格

基础使用

可以设置key-id设置唯一标识，默认为id

vue
<template>
  <k-batch-table
    :table-data="tableData" :table-column="tableColumn"
    v-model="multipleSelection"
  />
</template>

<script setup>
import { ref } from 'vue';

const tableColumn = [
  { label: '日期', prop: 'date' },
  { label: '姓名', prop: 'name' },
  { label: '地址', prop: 'address' },
];

const tableData = ref([
  {
    id: 1,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-03',
    name: 'luke',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

const multipleSelection = ref([]);

</script>

使用分页

如果设置total值，数值大于size值（默认10），显示分页

Total 50
  • 1
  • 2
  • 3
  • 4
  • 5
Go to
vue
<template>
  <k-batch-table
    :table-data="tableData" :table-column="tableColumn"
    v-model:page="currentPage" v-model="multipleSelection"
    :total="total" @current-change="currentChange"
  />
</template>

<script setup>
import { ref } from 'vue';

const tableColumn = [
  { label: '日期', prop: 'date' },
  { label: '姓名', prop: 'name' },
  { label: '地址', prop: 'address' },
];

const tableData = ref([
  {
    id: 1,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-03',
    name: 'luke',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

const multipleSelection = ref([]);

const total = ref(50);
const currentPage = ref(1);

const currentChange = (val) => {
  console.log('current page: ', val);
};

</script>

设置不可选

如果设置select-list，可设置默认选择，要配合check-key属性，设置判断选中的列的key

vue
<template>
  <k-batch-table
    :table-data="tableData" :table-column="tableColumn"
    v-model="multipleSelection" :select-list="selectList"
  />
</template>

<script setup>
import { ref } from 'vue';

const tableColumn = [
  { label: '日期', prop: 'date' },
  { label: '姓名', prop: 'name' },
  { label: '地址', prop: 'address' },
];

const tableData = ref([
  {
    id: 1,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-03',
    name: 'luke',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

const multipleSelection = ref([]);
const selectList = ref([{
  id: 3,
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}]);

</script>

默认选中

如果设置v-model="multipleSelection", multipleSelection数组不为空, 可设置默认选中

vue
<template>
  <k-batch-table
    :table-data="tableData" :table-column="tableColumn"
    v-model="multipleSelection"
  />
</template>

<script setup>
import { ref } from 'vue';

const tableColumn = [
  { label: '日期', prop: 'date' },
  { label: '姓名', prop: 'name' },
  { label: '地址', prop: 'address' },
];

const tableData = ref([
  {
    id: 1,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-03',
    name: 'luke',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

const multipleSelection = ref([
  {
    id: 3,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

</script>

使用插槽

Total 50
  • 1
  • 2
  • 3
  • 4
  • 5
Go to
vue
<template>
  <k-batch-table
    :table-data="tableData" :table-column="tableColumn"
    v-model:page="currentPage" v-model="multipleSelection"
    :total="total" @current-change="currentChange"
  >
    <template #footer>
      <el-button @click="batchHandle">
        批量操作
      </el-button>
    </template>
    <template #dateHeader>
      <el-tag>自定义表头</el-tag>
    </template>
    <template #set="{ row, index }">
      <k-button @click="clickHandle(row, index)">
        操作
      </k-button>
    </template>
  </k-batch-table>
</template>

<script setup>
import { ref } from 'vue';

const tableColumn = [
  { label: '日期', prop: 'date', header: 'dateHeader' },
  { label: '姓名', prop: 'name' },
  { label: '地址', prop: 'address' },
  { label: '操作', custom: 'set' },
];

const tableData = ref([
  {
    id: 1,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-03',
    name: 'luke',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

const multipleSelection = ref([]);

const total = ref(50);
const currentPage = ref(1);

const currentChange = (val) => {
  console.log('current page: ', val);
};

const batchHandle = () => {
  console.log('multipleSelection: ', multipleSelection);
};

</script>

BatchTable 属性

Table-column 属性

BatchTable 事件

BatchTable 方法

BatchTable slots

Table-column slots