vue2组件库：表格数据展示通用页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2组件库：表格数据展示通用页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。
vue2组件库：表格数据展示通用页面,vue,vue.js,elementui,前端文章来源地址https://www.toymoban.com/news/detail-669130.html
<!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"
                     @click="handleAddProjectButton">新建项目</el-button>
        </div>
      </div>
      <div>
        <!-- 新增弹窗 -->
        <el-dialog :title="projectDialogParams.title"
                   :visible.sync="projectDialogParams.visible"
                   width="50%">
          <el-form :model="projectDialogParams"
                   label-width="auto">
            <el-form-item label="项目名称"
                          :rules="{ required: true, message: '不能为空' }">
              <el-input placeholder="请输入项目名称"
                        v-model="projectDialogParams.projectName"></el-input>
            </el-form-item>
            <el-form-item label="项目描述">
              <el-input type="textarea"
                        :rows="5"
                        placeholder="请输入项目描述"
                        v-model="projectDialogParams.projectDescription"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="projectDialogParams.visible = false">取 消</el-button>
            <el-button type="primary"
                       @click="handleSubmitButton">确定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 列表 -->
      <div>
        <el-table v-loading="tableData.loading"
                  :data="tableData.List"
                  size="medium"
                  border
                  stripe
                  fit
                  height="350"
                  highlight-current-row
                  tooltip-effect="light"
                  :header-cell-style="{ textAlign: 'center' }"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column label="序号"
                           type="index"
                           :index="indexMethod"
                           width="50">
          </el-table-column>
          <el-table-column prop="name"
                           label="项目名称"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="description"
                           label="项目描述"
                           show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-row>
                  <el-col :span="12">
                    <!-- 传入表格当前行的索引, 然后通过 this.tableData.list[index].id 获取当前行数据 -->
                    <!-- <el-button type="text" size="small" @click="handleEdit(scope.$index)">编辑</el-button>      -->
                    <!-- 传入表格当前行的数据值 -->
                    <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>   
                  </el-col>
                  <el-col :span="12">
                  <el-popover         
                      placement="top"         
                      :ref="`popover-delete-${scope.$index}`">         
                      <p>确定删除?</p>         
                      <div style="text-align: right; margin: 0">         
                      <el-button style="padding: 2px;" size="small" type="text" @click="deleteCancelButton(scope.$index)">取消</el-button>         
                      <el-button style="padding: 2px;" type="primary" size="small" @click="handleDelete(scope.$index)">确定</el-button>         
                      </div>         
                      <el-button slot="reference" type="text" size="small">删除</el-button>         
                  </el-popover>  
                  </el-col>
              </el-row>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="height: 400px; width: 100%">
        <div style="text-align: center">
          <el-pagination layout="total, sizes, prev, pager, next, jumper"
                         background
                         @size-change="changeSize"
                         @current-change="changePage"
                         :current-page="queryParams.pageNum"
                         :page-size="queryParams.pageSize"
                         :total="tableData.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</body>
  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            search: '',
          },
          // 表格参数
          tableData: {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 分类表格数据
            List: [],
          },
          // 弹窗参数 start
          createTitle: "创建项目",
          editTitle: "编辑项目",
          projectDialogParams: {
            visible: false,
            title: this.createTitle,
            projectId: 0,
            projectName: '',
            projectDescription: '',
          },
        };
      },
      // 页面创建时调用
      created () {
        this.getList();
      },
      methods: {
        // 获取表格数据
        getList () {
          // 先loading等待从后端获取数据
          this.tableData.loading = true;
          // TODO 此处请求后端: 获取列表数据接口
          this.tableData.List = [{"id": 1, "name": "项目1", "description": "项目1的描述"}, {"id": 2,"name": "项目2", "description": "项目2的描述"},{"id": 3,"name": "项目3", "description": "项目3的描述"}];
          this.tableData.total = this.tableData.List.length;
          this.tableData.loading = false;
        },
        /** 搜索按钮操作 */
        handleQuery () {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 10;
          this.queryParams.search = '';
          this.handleQuery();
        },
        // 翻页按钮
        changePage (currentPageNum) {
          this.queryParams.pageNum = currentPageNum;
          this.getList();
        },
        // 切换每页条数
        changeSize (currentSize) {
          this.queryParams.pageSize = currentSize;
          this.getList();
        },
        /** 查询，分页相关方法 end */
        /** 新建项目弹窗 start */
        // 新建项目按钮
        handleAddProjectButton () {
          // 打开弹窗，清空内容
          this.projectDialogParams.visible = true;
          this.projectDialogParams.title = this.createTitle;
          this.projectDialogParams.projectId = 0;
          this.projectDialogParams.projectName = '';
          this.projectDialogParams.projectDescription = '';
        },
        // 弹窗确定按钮
        handleSubmitButton () {
          var data = {
            id: this.projectDialogParams.projectId,
            name: this.projectDialogParams.projectName,
            description: this.projectDialogParams.projectDescription,
          }
          // TODO 此处请求后端: 新增接口
          // 接口请求成功提示信息
          this.$message({
            showClose: true,
            message: '成功',
            type: 'success'
          });
          // 关闭对话框
          this.projectDialogParams.visible = false;
          // 更新列表数据
          this.getList();
        },
        /** 新建项目弹窗 end */
        /** 表格方法 */
        // 编辑按钮
        handleEdit (id) {
          // 回显内容
          // TODO 此处请求后端: 获取数据信息接口
          // 接口返回信息给弹窗内容赋值，做回显
          this.projectDialogParams.title = this.editTitle;
          this.projectDialogParams.projectId = id;
          this.projectDialogParams.projectName = '回显的项目名称';
          this.projectDialogParams.projectDescription = '回显的项目描述';
          // 回显数据赋值完成后打开弹窗
          this.projectDialogParams.visible = true;
        },
        // 删除二次弹窗
        // 确定按钮
        handleDelete(index){
          // 关闭弹窗
          this.$refs[`popover-delete-${index}`].doClose();
          // TODO 此处请求后端: 删除接口, 数据id 可以用  this.tableData.list[index].id  获取
          // 删除成功提示信息
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
          // 更新列表数据
          this.getList();
        },
        // 取消按钮
        deleteCancelButton(index){
          // 关闭弹窗
          this.$refs[`popover-delete-${index}`].doClose();
        },
        // 表格方法 start
        indexMethod (index) {
          return index + 1 + 10 * (this.queryParams.pageNum - 1);
        }, 
      },
    })
  </script>
</html>
到了这里，关于vue2组件库：表格数据展示通用页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！