DynamicTable 动态表格

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

基本用法

点击查看代码

<template>
  <s-dynamic-table :columns="tableColumns" v-model:dataSource="tableData" border>
    <template #name="{ record }">
      <el-input v-model="record['name']" placeholder="请输入姓名" />
    </template>
    <template #phone="{ record }">
      <el-input v-model="record['phone']" placeholder="请输入电话" />
    </template>
  </s-dynamic-table>
</template>

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

  const tableColumns = reactive([
    { prop: "name", label: "姓名", slot: "name" },
    { prop: "phone", label: "电话", slot: "phone" }
  ]);

  const tableData = ref([
    { id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" }
  ]);
</script>

拖拽排序

点击查看代码

<template>
  <s-dynamic-table :columns="tableColumns" v-model:dataSource="tableData" sortable border>
    <template #name="{ record }">
      <el-input v-model="record['name']" placeholder="请输入姓名" />
    </template>
    <template #phone="{ record }">
      <el-input v-model="record['phone']" placeholder="请输入电话" />
    </template>
  </s-dynamic-table>
</template>

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

  const tableColumns = reactive([
    { prop: "name", label: "姓名", slot: "name" },
    { prop: "phone", label: "电话", slot: "phone" }
  ]);

  const tableData = ref([
    { id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" }
  ]);
</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-table :columns="tableColumns" v-model:dataSource="tableData" :selection="selection" border>
    <template #name="{ record }">
      <el-input v-model="record['name']" placeholder="请输入姓名" />
    </template>
    <template #phone="{ record }">
      <el-input v-model="record['phone']" placeholder="请输入电话" />
    </template>
  </s-dynamic-table>
</template>

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

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

  const tableColumns = reactive([
    { prop: "name", label: "姓名", slot: "name" },
    { prop: "phone", label: "电话", slot: "phone" }
  ]);

  const tableData = ref([
    { id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" }
  ]);

  const selection = 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>

固定列

点击查看代码

<template>
  <s-dynamic-table :columns="tableColumns" v-model:dataSource="tableData" border>
    <template #name="{ record }">
      <el-input v-model="record['name']" placeholder="请输入姓名" />
    </template>
    <template #phone="{ record }">
      <el-input v-model="record['phone']" placeholder="请输入电话" />
    </template>
    <template #date="{ record }">
      <el-date-picker style="width: 100%;" v-model="record['date']" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
    </template>
  </s-dynamic-table>
</template>

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

  const tableColumns = reactive([
    { prop: "name", label: "姓名", width: "300px", slot: "name", fixed: true },
    { prop: "phone", label: "电话", width: "600px", slot: "phone" },
    { prop: "date", label: "日期", width: "600px", slot: "date" }
  ]);

  const tableData = ref([
    { id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" },
  ]);
</script>

Props

Slots

Emits