一.表格组件

前言

1.默认表格

2.带操作部分

<template>
  <!-- 表格区域 -->
  <web-table-operation :data="data" :column="column"  @operation="handleOperation"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const handleOperation = () => {
  alert(1)
}
const data = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const column = ref([
  {
    prop: "date",
    label: "date",
    width: '120px'
  },
  {
    prop: "name",
    label: "name",
    width: '120px'
  },
  {
    prop: "address",
    label: "address",
  },
])
</script>

<style lang="scss" scoped></style>

3.带操作部分

<template>
  <web-table-operation :data="data" :column="column" @operation="handleOperation" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const handleOperation = () => {
  alert(1)
}
const data = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const column = ref([
  {
    type: 'index',
    label: '序号',
    index: (index: number) => index + 1,
    width: '80px',
    align: 'center',
    headerAlign: 'center'
  },
  {
    prop: "date",
    label: "日期",
    width: '120px',
    headerAlign: 'center',
    sortable: true
  },
  {
    prop: "name",
    label: "姓名",
    width: '120px',
    headerAlign: 'center',
    sortable: true
  },
  {
    prop: "address",
    label: "地址",
    headerAlign: 'center',
    sortable: true
  },
  {
    label: '操作',
    align: 'center',
    headerAlign: 'center',
    slotable: true,
    name: 'operation',
    component: {
      is: 'web-button',
      class: 'link-text',
      text: '查看'
    }
  }
])
</script>

<style lang="scss" scoped></style>

3.带分页

共 0 条数据

• 1

<template>
  <web-table-pagination :data="data" :column="column" @operation="handleOperation" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const handleOperation = () => {
  alert(1)
}
const data = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const column = ref([
  {
    type: 'index',
    label: '序号',
    index: (index: number) => index + 1,
    width: '80px',
    align: 'center',
    headerAlign: 'center'
  },
  {
    prop: "date",
    label: "日期",
    width: '120px',
    headerAlign: 'center',
    sortable: true
  },
  {
    prop: "name",
    label: "姓名",
    width: '120px',
    headerAlign: 'center',
    sortable: true
  },
  {
    prop: "address",
    label: "地址",
    headerAlign: 'center',
    sortable: true
  },
  {
    label: '操作',
    align: 'center',
    headerAlign: 'center',
    slotable: true,
    name: 'operation',
    component: {
      is: 'web-button',
      class: 'link-text',
      text: '查看'
    }
  }
])
</script>

<style lang="scss" scoped></style>