table.md
4.07 KB
Table 表格
不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
8e4401a457bc80fe01bae75d1ef748788ca3e684/examples/views/docs/component/table.md#">基础用法
表格列可以通过list动态配置
::: snippet 使用list属性设置数据源，每一项都已设置为el-table-column，数据源格式与Form相同
<template>
<eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '项伯', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城1号院' },
{ name: '项仲', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城2号院' },
{ name: '项叔', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城3号院' },
{ name: '项季', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城4号院' },
],
tableList: [
{ key: 'name', label: '名称',
formatter(row, column) {
return `${row.name} - ${row.postcode}`;
}
},
{ key: 'address', label: '住址' },
{ key: 'postcode', agentKey: 'postName', label: '邮编' },
{ key: 'number', label: '楼栋号', minWidth: '180' },
]
}
},
mounted() {
console.log(this.$refs.table.instance);
},
methods: {
handleSubmit(value) {
console.log(value)
},
handleCancel() {
this.$refs.form.reset()
console.log('cancel!')
}
}
}
</script>
:::
8e4401a457bc80fe01bae75d1ef748788ca3e684/examples/views/docs/component/table.md#">自定义列
表格列可以通过slot动态配置，名称对应各列的列名
::: snippet 可以使用slot加slot-scope的方式，新版vue可以使用#slotname的形式
<template>
<eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="50"></el-table-column>
<template #postcode="{ label, key }">
<el-table-column prop="postcode" label="家属院" min-width="200">
<template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来 -->
<span style="color: orange">{{ $index }}</span>
<span style="color: blue">{{ label }}</span>
<span style="color: red">{{ key }}</span>
<span>{{ number }}</span>
<span>{{ postcode }}</span>
</template>
</el-table-column>
</template>
</eagle-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
{ name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
{ name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
{ name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
],
tableProps: {
border: true
},
tableList: [
{ key: 'name', label: '名称',
formatter(row, column) {
return `${row.name} - ${row.postcode}`;
}
},
{ key: 'address', label: '住址' },
{ key: 'postcode', label: '邮编' },
{ key: 'number', label: '楼栋号', minWidth: '180' },
]
}
},
mounted() {
console.log(this.$refs.table.instance);
},
methods: {
handleSubmit(value) {
console.log(value)
},
handleCancel() {
this.$refs.form.reset()
console.log('cancel!')
}
}
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- list | 表单项配置列表 | Array | - | [] tableProps | ElementUI表格属性 | Object | - | { size: 'small' } tableEvents | ElementUI表格事件 | Object | - | {}
List 表单项配置列表
配置方法与Form组件基本相同，有部分属性删减
参数|说明|类型|可选值|默认值 -|-|-|-|- key | 参数名 | String | - | - label | 参数标签 | String | - | - 其它参数 | ElementUI表格项的属性 | Any | - | -