Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染、多级表头) - 个人使用总结

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      label="年龄"
      width="180">
      <template #default="scope">
        <el-input v-model="scope.row.age" placeholder="请输入内容"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        age: 18,
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        age: 28,
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        age: 38,
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    }
  }
}
</script>

这个代码实例展示了如何使用 Element Plus 的 Table 组件来创建一个具有基本排序、筛选和自定义格式化功能的表格。同时，它也展示了如何为“年龄”列使用插槽来渲染一个输入框，以及如何使用formatter属性来格式化地址列的文本。这个例子简洁且易于理解，是学习和实践 Element Plus 表格组件的好例子。