# Data 数据展示
# 一、Table 表格
# 1、Table 组件属性
<el-table><el-table-column></el-table-column></el-table>
| 参数 | 描述 | 类型 | 可选值 | 默认值 |
|---|
| data | 显示的数据 | array | — | — |
| stripe | 是否为斑马纹 | table | boolean | — |
| border | 是否带有纵向边框 | boolean | — | false |
| size | Table 的尺寸 | string | large、default、small | — |
| height | Table 的高度，默认为自动高度。 | string、number | — | — |
| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string、number | — | — |
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
# 2、Table-column 组件属性
<el-table-column></el-table-column>
| 参数 | 描述 | 类型 | 可选值 | 默认值 |
|---|
| prop | 字段名称 对应列内容的字段名， 也可以使用 property属性 | string | — | — |
| label | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
| width | 对应列的宽度 | string、number | — | — |
| min-width | 对应列的最小宽度，width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string、number | — | — |
| align | 对齐方式 | string | left、center、right | left |
| fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧 | string、boolean | true、left、right | — |
| type | 对应列的类型。如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮 | string | selection、index、expand | — |
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="Name" min-width="180" />
<el-table-column prop="account" label="账号" align="right" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="skill" label="技能" fixed="right" />
</el-table>
<el-table :data="tableData" stripe border size="large" height="500">
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="姓名" width="180" align="right" />
<el-table-column prop="account" label="账号" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="skill" label="技能" fixed="right" />
</el-table>
<el-table :data="tableData" max-height="200" highlight-current-row>
<el-table-column type="selection" />
<el-table-column type="index" />
<el-table-column type="expand" />
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="姓名" width="180" align="right" />
<el-table-column prop="account" label="账号" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="skill" label="技能" fixed="right" />
</el-table>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default({
setup() {
const data = reactive({
tableData : [
{
id: 1,
name: '欧阳克',
account : 'ouyangke',
phone : '18811112222',
skill: 'PHP、ThinkPHP、Vue',
},
{
id: 2,
name: '朱天蓬',
account : 'zhutianpeng',
phone : '18811113333',
skill: 'HTML、CSS、JS、PHP、ThinkPHP',
},
{
id: 3,
name: '灭绝师太',
account : 'miejue',
phone : '18811114444',
skill: 'PHP、ThinkPHP、小程序',
}
]
})
return {
...toRefs(data)
}
}
})
</script>
# 3、Table 事件
| 事件名 | 说明 | 参数 |
|---|
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
<template>
<div>
<el-table :data="tableData" @selection-change="event">
<el-table-column type="selection" />
<el-table-column type="index" />
<el-table-column type="expand" />
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="姓名" width="180" align="right" />
<el-table-column prop="account" label="账号" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="skill" label="技能" fixed="right" />
</el-table>
<el-table :data="tableData" @select="event" @select-all="event">
<el-table-column type="selection" />
<el-table-column type="index" />
<el-table-column type="expand" />
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="姓名" width="180" align="right" />
<el-table-column prop="account" label="账号" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="skill" label="技能" fixed="right" />
</el-table>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default({
setup() {
const data = reactive({
tableData : [
{
id: 1,
name: '欧阳克',
account : 'ouyangke',
phone : '18811112222',
skill: 'PHP、ThinkPHP、Vue',
},
{
id: 2,
name: '朱天蓬',
account : 'zhutianpeng',
phone : '18811113333',
skill: 'HTML、CSS、JS、PHP、ThinkPHP',
},
{
id: 3,
name: '灭绝师太',
account : 'miejue',
phone : '18811114444',
skill: 'PHP、ThinkPHP、小程序',
}
]
})
const event = (e) => {
console.log(e);
}
return {
...toRefs(data),
event
}
}
})
</script>
# 4、Table-column 插槽
| 事件名 | 说明 |
|---|
| — | 自定义列的内容 作用域参数为 { row, column, $index } |
<template>
<div>
<el-table :data="tableData">
<el-table-column type="expand">
<template #default="scope">
<span>隐藏数据 {{scope.row}}</span>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="姓名" width="180" align="right">
<template #default="scope">
<span>php中文网 {{ scope.row }} {{ scope.column }} {{ scope.$index }}</span>
</template>
</el-table-column>
<el-table-column prop="account" label="账号" />
<el-table-column prop="phone" label="手机号" />
<el-table-column prop="skill" label="技能" fixed="right" />
</el-table>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default({
setup() {
const data = reactive({
tableData : [
{
id: 1,
name: '欧阳克',
account : 'ouyangke',
phone : '18811112222',
skill: 'PHP、ThinkPHP、Vue',
},
{
id: 2,
name: '朱天蓬',
account : 'zhutianpeng',
phone : '18811113333',
skill: 'HTML、CSS、JS、PHP、ThinkPHP',
},
{
id: 3,
name: '灭绝师太',
account : 'miejue',
phone : '18811114444',
skill: 'PHP、ThinkPHP、小程序',
}
]
})
const event = (e) => {
console.log(e);
}
return {
...toRefs(data),
event
}
}
})
</script>
