【Vue】中el-table数据项扩展各种类型总结（持续更新）

在Vue中，el-table是一个常用的组件来展示表格数据。下面是一些关于el-table的数据项（el-table-column）的扩展和类型的总结：

1. 文本（String）：最基本的数据类型，直接显示文本内容。

<el-table-column prop="name" label="姓名"></el-table-column>

2. 图片（Image）：可以通过scoped slot来显示图片。

<el-table-column label="头像">
  <template slot-scope="scope">
    <img :src="scope.row.avatar" alt="用户头像" style="width: 50px; height: 50px;">
  </template>
</el-table-column>

3. 链接（Link）：使用scoped slot嵌套el-link或者el-button来创建链接或按钮。

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-link :href="scope.row.url" target="_blank">查看详情</el-link>
  </template>
</el-table-column>

4. 状态指示（Status Indicator）：可以使用不同颜色或图标来表示不同的状态。

<el-table-column label="状态">
  <template slot-scope="scope">
    <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
      {{ scope.row.status === 'active' ? '在线' : '离线' }}
    </el-tag>
  </template>
</el-table-column>

5. 时间格式化（Date）：使用moment.js或类似库格式化时间显示。

<el-table-column label="注册时间">
  <template slot-scope="scope">
    {{ moment(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
  </template>
</el-table-column>

6. 操作按钮（Action Buttons）：可以通过scoped slot来添加编辑、删除等操作按钮。

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

这些只是一些基本的用法，el-table-column还有更多高级用法，如排序、筛选、展开行显示更多数据等。