element-ui表格数据样式及格式化案例

Element UI 是一套基于 Vue.js 的开源组件库，它提供了一系列丰富的 UI 组件，包括表格（Table）。在 Element UI 中，你可以通过设置一些属性和使用插槽来自定义表格数据的样式和格式化。

下面是一个简单的示例，展示如何使用 Element UI 表格来设置数据样式和格式化：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄">
        <!-- 格式化年龄，加上 " 岁" 字样 -->
        <template slot-scope="scope">
          {
  { scope.row.age + ' 岁' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 自定义操作按钮 -->
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 30 },
        { name: '李四', age: 25 },
        { name: '王五', age: 40 },
      ],
    };
  },
  methods: {
    handleEdit(row) {
      // 编辑操作
      console.log('编辑', row);
    },
    handleDelete(row) {
      // 删除操作
      console.log('删除', row);
    },
  },
};
</script>

在这个示例中，我们使用 el-table 组件来展示表格数据，通过 el-table-column 定义列，可以设置数据属性 prop，以及列名 label。在第二列中，我们使用插槽 slot-scope 来格式化数据，将年龄后面加上了 "岁" 字样。在第三列中，我们自定义了操作按钮，并设置了点击事件处理函数。

这只是 Element UI 表格的一个简单示例，你可以根据你的需求进一步自定义表格数据的样式和格式化。 Element UI 的官方文档提供了更多关于表格的用法和选项，你可以参考官方文档以获取更多信息：https://element-plus.org/#/en-US/component/table