SortList 排序列表

拖拽排序列表，对 s-list 进行了二次封装，提供了拖拽排序功能。

基本用法

1

张三

2

李四

3

王五

点击查看代码

<template>
  <s-sort-list v-model:dataSource="listData" border>
    <template #itemRender="{ record }">
      <div>{{ record.name }}</div>
    </template>
  </s-sort-list>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const listData = ref([
    { id: "111", name: "张三" },
    { id: "222", name: "李四" },
    { id: "333", name: "王五" }
  ]);
</script>

数据选择

选择器类型:

多选单选

可选择列表

1

列表项1

2

列表项2

3

列表项3

点击查看代码

<template>
  <s-form labelWidth="120px" showColon>
    <s-form-item label="选择器类型">
      <el-radio-group v-model="selectionType">
        <el-radio value="checkbox">多选</el-radio>
        <el-radio value="radio">单选</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <s-sort-list v-model:dataSource="listData" :selection="listSelection" border>
    <template #header>可选择列表</template>

    <template #itemRender="{ record }">
      <div>{{ record.text }}</div>
    </template>
  </s-sort-list>
</template>

<script setup lang="ts">
  import { ref, computed } from "vue";

  const selectionType = ref("checkbox");
  const selectedRows = ref([]);
  const selectedRowKeys = ref([]);

  const listData = ref([
    { id: "111", text: "列表项1" },
    { id: "222", text: "列表项2" },
    { id: "333", text: "列表项3" }
  ]);

  const listSelection = computed(() => {
    return {
      type: selectionType.value,
      selectedRows: selectedRows.value,
      selectedRowKeys: selectedRowKeys.value,
      onChange: (record: Record<string, any>) => {
        selectedRows.value = record.selectedRows;
        selectedRowKeys.value = record.selectedRowKeys;
      }
    };
  });
</script>

Props

Slots

Emits