@findsoft/draggable-table

基于vuedraggable封装的拖拽表格组件，样式和参数参考了ant-design table

Install

npm install @findsoft/draggable-table

Quick Start

<!-- vue -->
<template>
  <template v-for='(v, k) in demoList' :key='k'>
    <a-draggable-table v-bind='v' @end='onTableDragEnd' @selectChange='onTableSelect'>
      <template #list='{ record }'> 查看 <template>
      <template v-slot:operation='{ text, record }'> 编辑 <template>
    </a-draggable-table>
  </template>
</template>

import DraggableTable, { IBaseRecord, IColumns } from '@findsoft/draggable-table';

export default {
  components: {
    aDraggableTable: DraggableTable
  },
  setup() {
    // IBaseRecord 基础record字段，也可以不用。
    const tableClassList = ref<{id: string, name: string}[]>([
      {id: 1, name: 111},
      {id: 2, name: 222},
    ]);
    const columnClass: IColumns[] = [
      {
        title: '班级名称',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '班级人数',
        dataIndex: 'stuNum',
        ellipsis: true,
      },
      {
        title: '学生明细',
        dataIndex: 'list',
        slots: { customRender: 'list' },
        ellipsis: true,
      },
      {
        title: '所属教师',
        dataIndex: 'userNames',
        ellipsis: true,
      },
      {
        title: '操作',
        dataIndex: 'operation',
        slots: { customRender: 'operation' },
        width: '15%',
      },
    ];
    const loadingClassList = ref(false);
    const demoList = ref([
      {
        columns:columnClass,
        dataSource:tableClassList,
        loading:loadingClassList,
        rowSelect:true,
        bordered:false
      },
      {
        columns:columnClass,
        dataSource:tableClassList,
        loading:loadingClassList,
        rowSelect:false,
        bordered:true
      },
      {
        columns:columnClass,
        dataSource:tableClassList,
        loading:loadingClassList,
        rowSelect:true,
        bordered:true
      }
    ]);
    const onTableDragEnd = (list: []) => {
      console.log(list,'this is list');
    };
    const onTableSelect = ({ selectRowKeys: rowKeys }: {selectRowKeys: string[]}) => {
      console.log(rowKeys,'this is selectKey');
    }
    return {
      demoList,
      onTableDragEnd,
      onTableSelect
    }
  }
};

Props—Table

| 参数 | 说明 | 类型 | 默认值 | 必填 | | ---- | ---- | ---- | ---- | ---- | | dataSource | 表格数据 | Array | | 是 | | columns | 表格列 | Array | | 是 | | loading | 表格loading状态 | boolean | false | 否 | | bordered | 是否显示描边 | boolean | true | 否 | | rowSelect | 是否需要复选框 | boolean | true | 否 | | tHeadStyle | 表头样式 | Object | {} | 否 |

Props—Column

| 参数 | 说明 | 类型 | 默认值 | 必填 | | ---- | ---- | ---- | ---- | ---- | | title | 表头标题 | string | | 是 | | dataIndex | 列对应字段 | string | | 是 | | key | 列key | string | | 是 | | width | 列宽 | string | number | 自适应 | 否 | | align | 对齐方式 | string | left | 否 | | ellipsis | 单行溢出省略 | boolean | true | 否 | | slots | customRender: {slot: string} | string | | 否 |

Slot

slots 的 customRender 对应table插槽

CallBack

// 选中ids发生变化时触发
selectChange: () => {selectRowKeys: string[]};
// 拖拽结束后触发
end: () => IBaseRecord[];