@moment-design/choose-table v0.0.7

选择表格组件

使用组件

安装依赖

npm install @moment-design/choose-table --save

使用组件

./index.vue

<template>
  <ChooseTable
    :type="type"
    :modal-config="deepModalConfig"
    :choose-config="deepChooseConfig"
    @choose:change="chooseChange"
    @query-data="queryData"
  >
    <!-- 配置自定义触发按钮、不配置为默认按钮 -->
    <template #custom-trigger>
      <!-- 自定义触发按钮 -->
      <m-button type="primary" @click="deepModalConfig.modal.visible = true">
        自定义触发按钮
      </m-button>

      <!-- 详情页面去除操作功能 -->
      <m-button
        type="primary"
        status="success"
        style="margin-left: 16px"
        @click="type = type === 'view' ? '' : 'view'"
      >
        查看状态
      </m-button>
    </template>
    <template #price="{ rows }">¥ {{ rows.price }}</template>
  </ChooseTable>

  <!-- 自定义触发/展现形式 -->
  <div>
    <div style="margin-bottom: 16px">自定义触发/展现形式：</div>
    <MSelectTagSearch
      v-model="tags"
      multiple
      btn-text="选择部门"
      :options="options"
      :value-key="'id'"
      :max-tag-count="3"
      :allow-search="false"
      @prefixClick="deepModalConfig.modal.visible = true"
      @remove="remove"
    ></MSelectTagSearch>
  </div>

  <!-- 已选数据 -->
  <div style="margin-top: 16px">已选数据：{{ chooses }}</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import MSelectTagSearch from '@moment-design/select-tag-search';
import { modalConfig, chooseConfig } from './config';
import { useCloneDeep } from '../hooks/useCloneDeep';
import ChooseTable from '../index.vue';
import '@moment-design/select-tag-search/dist/css/index.css';

export default defineComponent({
  name: 'LDemo',
  components: {
    ChooseTable,
    MSelectTagSearch,
  },
  setup() {
    const deepModalConfig: any = reactive(useCloneDeep(modalConfig));
    const deepChooseConfig: any = reactive(useCloneDeep(chooseConfig));
    const type = ref('');
    const chooses = ref([]);
    const options = ref([]);
    const tags = ref([]);
    const chooseChange = (data: any) => {
      chooses.value = data;
      tags.value = data.map((item: any) => item.id);
    };
    const remove = (data: any) => {
      deepChooseConfig.table.data = deepChooseConfig.table.data.filter(
        (item: any) => item.id !== data
      );
    };

    const queryData = () => {
      deepModalConfig.table.data = [
        { id: 1, name: '2024-12-27', code: '3', price: '15.54' },
        { id: 2, name: '2024-12-26', code: '8', price: '16.55' },
        { id: 3, name: '2024-12-25', code: '5', price: '17.56' },
        { id: 4, name: '2024-12-23', code: '2', price: '18.57' },
        { id: 5, name: '2024-12-18', code: '2', price: '19.58' },
        { id: 6, name: '2024-12-16', code: '2', price: '110.59' },
      ];
      deepModalConfig.footer.pagination.total = 36;
      options.value = deepModalConfig.table.data.map((item: any) => ({
        label: item.name,
        value: item.id,
      }));
    };

    return {
      deepModalConfig,
      deepChooseConfig,
      type,
      chooses,
      tags,
      options,
      chooseChange,
      queryData,
      remove,
    };
  },
});
</script>

./config.ts

/**
 * 配置弹出选择表格
 */
export const modalConfig = {
  modal: {
    visible: false,
    others: {
      title: '选择商品',
      width: 1100,
    },
  },
  // * 配置弹窗自动请求数据接口
  // request: "",
  search: {
    data: {
      status: '1',
    },
    forms: [
      { type: 'input', field: 'input', label: '商品名称' },
      {
        type: 'select',
        field: 'city',
        label: '商品状态',
        options: [
          { label: 'A', value: 'a' },
          { label: 'B', value: 'b' },
          { label: 'C', value: 'c' },
        ],
      },
      {
        type: 'select',
        field: 'type',
        label: '商品状态',
        options: [
          { label: 'A', value: 'a' },
          { label: 'B', value: 'b' },
          { label: 'C', value: 'c' },
        ],
      },
    ],
  },
  status: {
    prop: 'status',
    items: [
      { name: '全部', value: 1 },
      { name: '上架', value: 2 },
      { name: '下架', value: 3 },
    ],
  },
  table: {
    data: [],
    selectedType: 'checkbox',
    selectedRows: [],
    columns: [
      { title: '#', dataIndex: '', width: 60 },
      {
        title: '商品名称',
        dataIndex: 'name',
        width: 460,
        others: { ellipsis: true, tooltip: true },
      },
      { title: 'SKU编码', dataIndex: 'code' },
      { type: 'slot', title: '价格', dataIndex: 'price' },
    ],
  },
  footer: {
    pagination: {
      props: { page: 'currentPge', size: 'pageSize' },
      total: 0,
      page: 1,
      size: 10,
      pageSizes: [10, 20, 30, 50, 100],
      others: {},
    },
  },
};

export const chooseConfig = {
  table: {
    data: [],
    columns: [
      { title: '#', dataIndex: '', width: 60 },
      {
        title: '商品名称',
        dataIndex: 'name',
        width: 460,
        others: { ellipsis: true, tooltip: true },
      },
      { title: 'SKU编码', dataIndex: 'code' },
      { type: 'slot', title: '价格', dataIndex: 'price' },
      {
        type: 'slot',
        dataIndex: 'operate',
        title: '操作',
        align: 'center',
        width: 160,
      },
    ],
  },
};

API

Props

Events