Ben Lin
2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25
src/views/demo/table/Basic.vue
@@ -28,53 +28,38 @@
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, ColumnChangeParam } from '/@/components/Table';
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, ColumnChangeParam } from '@/components/Table';
  import { getBasicColumns, getBasicData } from './tableData';
  export default defineComponent({
    components: { BasicTable },
    setup() {
      const canResize = ref(false);
      const loading = ref(false);
      const striped = ref(true);
      const border = ref(true);
      const pagination = ref<any>(false);
      function toggleCanResize() {
        canResize.value = !canResize.value;
      }
      function toggleStriped() {
        striped.value = !striped.value;
      }
      function toggleLoading() {
        loading.value = true;
        setTimeout(() => {
          loading.value = false;
          pagination.value = { pageSize: 20 };
        }, 3000);
      }
      function toggleBorder() {
        border.value = !border.value;
      }
  const canResize = ref(false);
  const loading = ref(false);
  const striped = ref(true);
  const border = ref(true);
  const pagination = ref<any>(false);
      function handleColumnChange(data: ColumnChangeParam[]) {
        console.log('ColumnChanged', data);
      }
      return {
        columns: getBasicColumns(),
        data: getBasicData(),
        canResize,
        loading,
        striped,
        border,
        toggleStriped,
        toggleCanResize,
        toggleLoading,
        toggleBorder,
        pagination,
        handleColumnChange,
      };
    },
  });
  const columns = getBasicColumns();
  const data = getBasicData();
  function toggleCanResize() {
    canResize.value = !canResize.value;
  }
  function toggleStriped() {
    striped.value = !striped.value;
  }
  function toggleLoading() {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      pagination.value = { pageSize: 20 };
    }, 3000);
  }
  function toggleBorder() {
    border.value = !border.value;
  }
  function handleColumnChange(data: ColumnChangeParam[]) {
    console.log('ColumnChanged', data);
  }
</script>