DynamicList 动态列表

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

基本用法

1

点击查看代码

<template>
  <s-dynamic-list v-model:dataSource="listData" border>
    <template #itemRender="{ record }">
      <el-input v-model="record['name']" placeholder="请输入" />
    </template>
  </s-dynamic-list>
</template>

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

  const listData = ref([
    { id: "111", name: "张三" }
  ]);
</script>

拖拽排序

1

点击查看代码

<template>
  <s-dynamic-list v-model:dataSource="listData" sortable border>
    <template #itemRender="{ record }">
      <el-input v-model="record['name']" placeholder="请输入" />
    </template>
  </s-dynamic-list>
</template>

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

  const listData = ref([
    { id: "111", name: "张三" }
  ]);
</script>

数据选择

点击查看代码

<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-dynamic-list v-model:dataSource="listData" :selection="selection" border>
    <template #title>可选择列表</template>

    <template #itemRender="{ record }">
      <el-input v-model="record['text']" placeholder="请输入" />
    </template>
  </s-dynamic-list>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import { useSDataList } from "@el-pro/index";

  const {
    selectionType,
    selection
  } = useSDataList();

  const listData = ref([
    { id: "111", text: "列表项1" }
  ]);
</script>

Props

Slots

Emits