2月17日 ElementUI 表格-1
表格
创建一个简单的表格
在开发过程中,我们要逐渐养成模块化开发的习惯,比如我们要做一个表格展示管理员账号,那么可以把它做成一个独立的模块。
这种形式的好处是,将来去到公司时,都是以这种方式,将一个个小任务分派下来的,我们要做的可能就只有一个大管理功能的某些小模块。这些模块的功能更加单一更加纯粹,做完之后统一提交,由某个人负责将大家写的模块整合起来,做成完整的功能。
我们写了/components/admin/adminTable.vue用来放置账号管理的表格组件。
<el-table>
是ElementUI的表格组件,定义一个表格,border是时候显示边框,stripe是时候显示隔行的斑马线条纹背景,data属性用于动态绑定数据。
<el-table-column>
是表格组件内用来定义列,一定要在<el-table>
标签内使用。他的属性如下:
- prop:要绑定的数据字段
- label:要显示的标题
- width:固定列宽为指定值
- min-width:设定列的最小宽度值
<template>
<div>
<el-table :data="list" border stripe>
<el-table-column prop="id" label="编号" width="100"></el-table-column>
<el-table-column prop="name" label="姓名" min-width="200"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: "1", name: "abc" },
{ id: "2", name: "abc234234" },
{ id: "2", name: "abc234234" },
{ id: "2", name: "abc234234" },
{ id: "2", name: "abc234234" }
]
};
}
};
</script>
设定列内容的对其方式
- align 标题、内容的对其方式
header-align 标题对其方式
如果要让内容和标题都以相同方式对其,只需要设定align就可以了,如果要单独修改头部的对其方式,则用header-align设定。
表格内容格式化
内容的格式化
默认情况下,我们的单元格显示的数据,就是当前绑定的字段对应的数据值。数据是什么,就显示什么。
有时,我们想要对显示的内容格式进行修改,这时候,就需要用到
formatter 用来格式化内容 Function(row, column, cellValue, index)
<el-table-column prop="id" label="编号" width="100" :formatter="format"></el-table-column>
methods: {
//函数返回单元格格要显示的数据值
format(row, column, cellValue, index){
console.log(row) //当前这一行的数据
console.log(column) //列的配置信息
console.log(cellValue) //当前单元格的值
console.log(index) //当前行的索引值
return "ID:"+cellValue;
}
}
使用这种方式去格式化内容,最终只会显示出字符串数据。想要进行标签混排成复杂的格式是不行。
复杂的内容可采用插槽
<el-table-column prop="name" label="姓名" min-width="200" align="right" header-align="center">
<template v-slot="scope">
<el-button type="primary" >按钮</el-button>
{{scope.$index}}-{{scope.row.id}}-{{scope.row.name}}
</template>
<template v-slot:header="scope">
{{scope.$index}}姓名
</template>
</el-table-column>
使用插槽,我们可以在表格中编排出任意格式的单元格内容(或表头内容)。 插槽有两个
- default:列的单元格内容的插槽位
- header:列的头部内容的插槽位
相比之下,这种方式更加灵活而且便捷,不需要单独创建函数,而且可以支持任意内容,任意格式显示。