vue2组件库：表格数据展示通用页面

吕海洋

已于 2023-08-24 18:50:28 修改

阅读量619

点赞数

分类专栏： vue 文章标签： vue.js elementui 前端

于 2023-08-24 18:11:03 首次发布

本文链接：https://blog.csdn.net/wuchenlhy/article/details/132480081

版权

本文介绍如何使用Vue2和ElementUI组件库构建一个通用的表格数据展示页面。通过ElementUI的Table组件，可以方便地进行数据绑定、列定义和操作按钮配置，实现灵活的数据管理和交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <div class="app-container">
      <div style="width: 100%; height: 60px">
        <div style="float: left; line-height:60px; width: 500px;">
          <!-- 查询 -->
          <el-form :model="queryParams"
                   ref="queryForm"
                   :inline="true">
            <el-form-item label="项目名称:"
                          prop="name">
              <div style="line-height:60px;">
                <el-input v-model="queryParams.search"
                          placeholder="请输入关键字"
                          clearable
                          size="small"
                          @keyup.enter.native="handleQuery" />
              </div>
            </el-form-item>
            <el-form-item>
              <div style="line-height:60px;">
                <el-button type="primary"
                           icon="el-icon-search"
                           size="mini"
                           @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh"
                           size="mini"
                           @click="resetQuery">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right; line-height:60px; width: 100px;">
          <el-button type="primary"
                     size="mini"