526互联

element-ui（table表格）

发布时间 2023-08-25 16:08:35作者: huiyii

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<el-table :data="tableData" style="width: 100%">
 <el-table-column prop="date" label="日期" width="180"></el-table-column>
 <el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>

默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

获取当前行数据

表格中的数据是已经显示过的，要想拿到当前表格中指定行数的数据时，则需要在template标签中添加这个属性即可slot-scope=“scope， 同时写出一个点击事件的方法如编辑按钮，其中 scope.row就是拿到当前行的所有数据，如果要想拿到指定数据，则需要指定你当前行指定需要的数据的字段就好，如：scope.row.musicId

<el-table-column label="操作" align="center" min-width="100">
    <template slot-scope="scope">
        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
    </template>
</el-table-column>

格式化formatter

用来格式化内容。默认参数 Function(row, column, cellValue, index)，案例：后端返回1、0，前端显示为是、否

<el-table-column :formatter="envFormatter" label="小程序环境" prop="env" width="120"/>

methods: {
envFormatter(row) {
      switch (row.env) {
        case 'pro':
          return '线上'
        case 'qa':
          return '测试'
      }
    },
  }