Table 表格
使用数据配置项列表快速生成一个表格
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/table.md#">基础用法
创建一个基础表格，配置项支持el-table-column组件参数
::: snippet 使用list属性设置数据源，每一项都已设置为el-table-column
<template>
<eagle-table :value="tableData" :list="list"></eagle-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
{ name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
],
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄', sortable: true },
{ key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
{ key: 'position', label: '职务' },
]
}
},
}
</script>
:::
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/table.md#">自定义列
在使用list的同时，也支持表格列具名插槽及表格列值具名插槽，以满足不同的业务需求
::: snippet 在组件内部通过具名插槽的方式，替换对应内容，表格列具名插槽格式为key，返回值为对应配置项所有参数；表格列值具名插槽格式为value-key，返回值为row、value、column、index及对应配置项所有参数。
<template>
<eagle-table :value="tableData" :list="list">
<template #value-age="{ value }">
<el-tag :type="value > 40 ? 'danger' : 'primary'">{{ value }}</el-tag>
</template>
<template #position>
<el-table-column prop="position" label="职务" min-width="200">
<el-tag type="success" slot-scope="{ row }">{{ row.position }}</el-tag>
</el-table-column>
</template>
</eagle-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
{ name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
],
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄', sortable: true },
{ key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
{ key: 'position', label: '职务' },
// { key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
]
}
},
}
</script>
:::
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/table.md#">首尾追加列
一般情况下，会存在一些特殊的列必然位于首列或尾列，这时可以设置追加列，通常配合Scheme组件使用
::: snippet 在表格中，可以使用追加列具名插槽进行表格列的追加，插槽有：尾列追加插槽$append、末尾插槽$end以及组件默认插槽被认为是首列追加插槽。
<template>
<eagle-table :value="tableData" :list="list">
<el-table-column slot="$end" prop="operation" label="操作">
<el-button type="text">删除</el-button>
</el-table-column>
<el-table-column type="selection" min-width="40"></el-table-column>
<el-table-column prop="troopCode" label="部队编码"></el-table-column>
<el-table-column slot="$append" prop="file" label="附件"></el-table-column>
</eagle-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长', file: '履历' },
{ name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
],
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄' },
]
}
},
}
</script>
:::
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/table.md#">动态列
在特殊业务需求下，对于表格列的显示隐藏会有一些动态需求
::: snippet 在表格列数据配置list属性中，使用visible作为列显示和隐藏的判断条件，支持Boolean和Function类型
<template>
<eagle-table :value="tableData" :list="list"></eagle-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '李云龙', age: 42, troop: '独立团' },
{ name: '赵刚', age: 30, troop: '独立团', position: '政委' },
],
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄' },
{ key: 'troop', label: '部队番号', visible: false },
{ key: 'position', label: '职务', visible: (tableData) => tableData.filter(d => d.position).length > 0 },
{ key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
]
}
},
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 表格数据 | Array | - | - list | 表单项配置列表 | Array | - | [] tableProps | ElementUI表格属性 | Object | - | { size: 'small' } tableEvents | ElementUI表格事件 | Object | - | {}
Methods 方法
可以通过引用$ref获取到el-table的实体对象instance，从而使用el-table的所有方法
List 表单项配置列表
配置方法与Form组件基本相同，有部分属性删减
参数|说明|类型|可选值|默认值 -|-|-|-|- key | 参数名 | String | - | - label | 参数标签 | String | - | - visible | 表格列显示状态 | Boolean,Function(tableData: array) | - | true 其它参数 | el-table-column组件参数 | Any | - | -