mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<template>
|
||
<div>
|
||
<p class="tip">
|
||
<table-api-link name="vxe-table"/> 基础表格，基于模板方式使用非常简单、便捷<br>
|
||
<span class="red">（注：每一列 field 字段属性不可更改）</span>
|
||
</p>
|
||
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button @click="allAlign = 'left'">居左</vxe-button>
|
||
<vxe-button @click="allAlign = 'center'">居中</vxe-button>
|
||
<vxe-button @click="allAlign = 'right'">居右</vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<vxe-table
|
||
:align="allAlign"
|
||
:data="tableData1">
|
||
<vxe-column type="seq" width="60"></vxe-column>
|
||
<vxe-column field="name" title="Name"></vxe-column>
|
||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||
<vxe-column field="age" title="Age"></vxe-column>
|
||
</vxe-table>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, ref } from 'vue'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const allAlign = ref('')
|
||
|
||
const tableData1 = ref([
|
||
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
|
||
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
|
||
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
|
||
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
|
||
])
|
||
|
||
return {
|
||
allAlign,
|
||
tableData1
|
||
}
|
||
}
|
||
})
|
||
</script>
|