表格

基础用法

• 示例：

点击查看代码

<template>
  <div>
    <ZTable
      :data-source="dataSource"
      :columns="columns"
    />
  </div>
</template>
<script>
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const dataSource = ref([
        {
          key: '1',
          name: 'John Brown',
          money: '￥300,000.00',
          address: 'New York No. 1 Lake Park'
        },
        {
          key: '2',
          name: 'Jim Green',
          money: '￥1,256,000.00',
          address: 'London No. 1 Lake Park'
        },
        {
          key: '3',
          name: 'Joe Black',
          money: '￥120,000.00',
          address: 'Sidney No. 1 Lake Park'
        }
      ])
      const columns = ref([
        {
          title: 'Name',
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: 'Cash Assets',
          dataIndex: 'money'
        },
        {
          title: 'Address',
          dataIndex: 'address'
        }
      ])
      return {
        dataSource,
        columns
      }
    }
  })
</script>
    

添加表格边框线，页头和页脚

• 示例：

点击查看代码

<template>
  <ZTable :columns="columns" :data-source="data" bordered>
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'name'">
        <a>{{ text }}</a>
      </template>
    </template>
    <template #title>Header</template>
    <template #footer>Footer</template>
  </ZTable>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Cash Assets',
        className: 'column-money',
        dataIndex: 'money',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
    ]
    const data = [
      {
        key: '1',
        name: 'John Brown',
        money: '￥300,000.00',
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        money: '￥1,256,000.00',
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        money: '￥120,000.00',
        address: 'Sidney No. 1 Lake Park',
      },
    ]
    return {
      data,
      columns,
    }
  },
})
</script>
<style>
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>

带斑马纹表格

• 示例：

点击查看代码

<template>
  <ZTable
  :data-source="data"
  :columns="columns"
  :row-class-name="
    (_record, index) => (index % 2 == 1 ? 'table-striped' : null)
  "
/>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Cash Assets',
        className: 'column-money',
        dataIndex: 'money',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
    ]
    const data = [
      {
        key: '1',
        name: 'John Brown',
        money: '￥300,000.00',
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        money: '￥1,256,000.00',
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        money: '￥120,000.00',
        address: 'Sidney No. 1 Lake Park',
      },
    ]
    return {
      data,
      columns,
    }
  },
})
</script>
<style>
.table-striped {
  background-color: #f4f6fa;
}
</style>

固定头和列

若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。 建议指定 scroll.x为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。

• 示例：

点击查看代码

<template>
  <div>
    <ZTable
      :data-source="dataSource1"
      :columns="columns1"
      :scroll="{ x: 1500, y: 300 }"
    />
  </div>
</template>
<script>
  import { defineComponent, ref} from 'vue'
  export default defineComponent({
    setup() {
      const columns1 = ref([
        {
          title: 'Full Name',
          width: 100,
          dataIndex: 'name',
          key: 'name',
          fixed: 'left'
        },
        {
          title: 'Age',
          width: 100,
          dataIndex: 'age',
          key: 'age',
          fixed: 'left'
        },
        {
          title: 'Column 1',
          dataIndex: 'address',
          key: '1',
          width: 150
        },
        {
          title: 'Column 2',
          dataIndex: 'address',
          key: '2',
          width: 150
        },
        {
          title: 'Column 3',
          dataIndex: 'address',
          key: '3',
          width: 150
        },
        {
          title: 'Column 4',
          dataIndex: 'address',
          key: '4',
          width: 150
        },
        {
          title: 'Column 5',
          dataIndex: 'address',
          key: '5',
          width: 150
        },
        {
          title: 'Column 6',
          dataIndex: 'address',
          key: '6',
          width: 150
        },
        {
          title: 'Column 7',
          dataIndex: 'address',
          key: '7',
          width: 150
        },
        {
          title: 'Column 8',
          dataIndex: 'address',
          key: '8'
        },
        {
          title: 'Action',
          key: 'operation',
          fixed: 'right',
          width: 100
        }
      ])
      const dataSource1 = ref([])
      for (let i = 0; i < 10; i++) {
        dataSource1.value.push({
          key: i,
          name: 'Edrward',
          age: 32,
          address: 'London'
        })
      }
      return {
        dataSource1,
        columns1
      }
    }
  })
</script>