2月17日 ElementUI 表格-1

Profile Picture
- Published on Feb 17, 2020🌏 Public

表格

创建一个简单的表格

在开发过程中,我们要逐渐养成模块化开发的习惯,比如我们要做一个表格展示管理员账号,那么可以把它做成一个独立的模块。

这种形式的好处是,将来去到公司时,都是以这种方式,将一个个小任务分派下来的,我们要做的可能就只有一个大管理功能的某些小模块。这些模块的功能更加单一更加纯粹,做完之后统一提交,由某个人负责将大家写的模块整合起来,做成完整的功能。

我们写了/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:列的头部内容的插槽位

相比之下,这种方式更加灵活而且便捷,不需要单独创建函数,而且可以支持任意内容,任意格式显示。