vue 使用el-table循环生成表格的过程

下面我将详细讲解使用 Vue 和 el-table 循环生成表格的完整攻略。该过程可以分为以下几个步骤：

引入必须的依赖

首先，需要在你的代码中引入必须的依赖，这包括 Vue 框架及其 Element-UI 组件库。

<!-- index.html -->
<!-- 引入 Vue 和 Element-UI-->
...
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
...

// app.js
// 创建 Vue 实例
new Vue({
  el: '#app',
  data: { 
    // 初始化数据
    tableData: [
      { id: '1', name: 'Lucy', age: '18' },
      { id: '2', name: 'Tom', age: '20' },
      { id: '3', name: 'Lily', age: '22' }
    ]
  }
})

创建 el-table 表格

在 Vue 实例中，创建 el-table 表格，并绑定数据 tableData。其中，el-table 的各个属性可以自行参考 Element-UI 官方文档进行详细设置。

<!-- index.html -->
<!-- 表格部分 -->
<div id="app">
  <el-table :data="tableData">
    <!-- 表头部分 -->
    <el-table-column prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</div>

循环生成表格数据

接下来，我们需要使用 v-for 指令来循环生成表格数据。我们需要先用 v-for 循环生成 el-table-column 组件，然后再在每个组件内部使用 {{ row.[prop] }} 语法来动态显示每行数据的属性。

<!-- index.html -->
<div id="app">
  <el-table :data="tableData">
    <!-- 循环生成表头 -->
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
  </el-table>
</div>

// app.js
new Vue({
  el: '#app',
  data: { 
    tableData: [
      { id: '1', name: 'Lucy', age: '18' },
      { id: '2', name: 'Tom', age: '20' },
      { id: '3', name: 'Lily', age: '22' }
    ],
    columns: [
      { prop: 'id', label: '编号' },
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' },
      // 可以根据数据实际情况自定义更多列
    ]
  }
})

自定义表格样式

最后，我们可以根据自己需要对表格样式进行一些自定义。例如，可以使用 slot-scope 自定义表格数据渲染的方式，如下所示：

<!-- index.html -->
<div id="app">
  <el-table :data="tableData">
    <!-- 循环生成表头 -->
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
      <!-- 自定义表格数据的渲染方式 -->
      <template slot-scope="scope">
        <span v-if="column.prop === 'id'">ID {{scope.row.id}}</span>
        <span v-else>{{ scope.row[column.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</div>

示例1的完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Table</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-table :data="tableData">
            <!-- 循环生成表头 -->
            <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
                <!-- 自定义表格数据的渲染方式 -->
                <template slot-scope="scope">
                    <span v-if="column.prop === 'id'">ID {{scope.row.id}}</span>
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [{
                        id: '1',
                        name: 'Lucy',
                        age: '18'
                    },
                    {
                        id: '2',
                        name: 'Tom',
                        age: '20'
                    },
                    {
                        id: '3',
                        name: 'Lily',
                        age: '22'
                    }
                ],
                columns: [{
                        prop: 'id',
                        label: '编号'
                    },
                    {
                        prop: 'name',
                        label: '姓名'
                    },
                    {
                        prop: 'age',
                        label: '年龄'
                    },
                    // 可以根据数据实际情况自定义更多列
                ]
            }
        })
    </script>
</body>

</html>

示例2对数据进行了大量处理后再进行显示，完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Table</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-table :data="computedList">
            <!-- 自定义表格头部 -->
            <el-table-column label="所有用户" width="120">
                <template slot-scope="{ row }">
                    <div style="display: flex; align-items: center;">
                        <el-avatar :src="row.avatar" style="margin-right: 12px;"></el-avatar>
                        <span>{{ row.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="入职时间">
                <template slot-scope="{ row }">
                    {{ formatDate(row.hiredate) }}
                </template>
            </el-table-column>
            <el-table-column label="工龄">
                <template slot-scope="{ row }">
                    {{ calculateSeniority(row.hiredate) }}
                </template>
            </el-table-column>
            <!-- 自定义操作栏 -->
            <el-table-column label="操作">
                <template slot-scope="{ row }">
                    <el-button type="primary" size="mini" @click="click(row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [{
                        name: 'Andy',
                        avatar: 'https://randomuser.me/api/portraits/men/50.jpg',
                        hiredate: '2020-01-01'
                    },
                    {
                        name: 'Bob',
                        avatar: 'https://randomuser.me/api/portraits/men/51.jpg',
                        hiredate: '2019-11-11'
                    },
                    {
                        name: 'Claire',
                        avatar: 'https://randomuser.me/api/portraits/women/52.jpg',
                        hiredate: '2020-03-03'
                    },
                    {
                        name: 'David',
                        avatar: 'https://randomuser.me/api/portraits/men/53.jpg',
                        hiredate: '2018-05-05'
                    }
                ]
            },
            computed: {
                // 对数据进行计算和处理，然后返回表格需要的数据
                computedList() {
                    // 计算每个用户的工龄并添加到对象中
                    return this.userList.map(user => {
                        const seniority = this.calculateSeniority(user.hiredate)
                        return {
                            ...user,
                            seniority
                        }
                    })
                }
            },
            methods: {
                click(row) {
                    console.log(row)
                },
                formatDate(dateString) {
                    const date = new Date(dateString)
                    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
                },
                calculateSeniority(hiredateString) {
                    const hiredate = new Date(hiredateString)
                    const now = new Date()
                    const yearDiff = now.getFullYear() - hiredate.getFullYear()
                    const monthDiff = now.getMonth() - hiredate.getMonth()
                    const dayDiff = now.getDate() - hiredate.getDate()
                    return yearDiff * 12 + monthDiff + (dayDiff >= 0 ? 1 : 0)
                }
            }
        })
    </script>
</body>

</html>

以上就是使用 Vue 和 el-table 循环生成表格的完整攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 使用el-table循环生成表格的过程 - Python技术站