国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

vue2組件庫(kù)：表格數(shù)據(jù)展示通用頁(yè)面

2年前作者：呂海洋分類：Toy博客閱讀(24)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了vue2組件庫(kù)：表格數(shù)據(jù)展示通用頁(yè)面。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

vue2組件庫(kù)：表格數(shù)據(jù)展示通用頁(yè)面,vue,vue.js,elementui,前端文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-669130.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" >
  <!-- 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="項(xiàng)目名稱:"
                          prop="name">
              <div style="line-height:60px;">
                <el-input v-model="queryParams.search"
                          placeholder="請(qǐng)輸入關(guān)鍵字"
                          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">新建項(xiàng)目</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="項(xiàng)目名稱"
                          :rules="{ required: true, message: '不能為空' }">
              <el-input placeholder="請(qǐng)輸入項(xiàng)目名稱"
                        v-model="projectDialogParams.projectName"></el-input>
            </el-form-item>
            <el-form-item label="項(xiàng)目描述">
              <el-input type="textarea"
                        :rows="5"
                        placeholder="請(qǐng)輸入項(xiàng)目描述"
                        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="序號(hào)"
                           type="index"
                           :index="indexMethod"
                           width="50">
          </el-table-column>
          <el-table-column prop="name"
                           label="項(xiàng)目名稱"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="description"
                           label="項(xiàng)目描述"
                           show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-row>
                  <el-col :span="12">
                    <!-- 傳入表格當(dāng)前行的索引, 然后通過(guò) this.tableData.list[index].id 獲取當(dāng)前行數(shù)據(jù) -->
                    <!-- <el-button type="text" size="small" @click="handleEdit(scope.$index)">編輯</el-button>      -->
                    <!-- 傳入表格當(dāng)前行的數(shù)據(jù)值 -->
                    <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 {
          // 查詢參數(shù)
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            search: '',
          },
          // 表格參數(shù)
          tableData: {
            // 遮罩層
            loading: true,
            // 總條數(shù)
            total: 0,
            // 分類表格數(shù)據(jù)
            List: [],
          },
          // 彈窗參數(shù) start
          createTitle: "創(chuàng)建項(xiàng)目",
          editTitle: "編輯項(xiàng)目",
          projectDialogParams: {
            visible: false,
            title: this.createTitle,
            projectId: 0,
            projectName: '',
            projectDescription: '',
          },
        };
      },
      // 頁(yè)面創(chuàng)建時(shí)調(diào)用
      created () {
        this.getList();
      },
      methods: {
        // 獲取表格數(shù)據(jù)
        getList () {
          // 先loading等待從后端獲取數(shù)據(jù)
          this.tableData.loading = true;
          // TODO 此處請(qǐng)求后端: 獲取列表數(shù)據(jù)接口
          this.tableData.List = [{"id": 1, "name": "項(xiàng)目1", "description": "項(xiàng)目1的描述"}, {"id": 2,"name": "項(xiàng)目2", "description": "項(xiàng)目2的描述"},{"id": 3,"name": "項(xiàng)目3", "description": "項(xiàng)目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();
        },
        // 翻頁(yè)按鈕
        changePage (currentPageNum) {
          this.queryParams.pageNum = currentPageNum;
          this.getList();
        },
        // 切換每頁(yè)條數(shù)
        changeSize (currentSize) {
          this.queryParams.pageSize = currentSize;
          this.getList();
        },
        /** 查詢，分頁(yè)相關(guān)方法 end */
        /** 新建項(xiàng)目彈窗 start */
        // 新建項(xiàng)目按鈕
        handleAddProjectButton () {
          // 打開(kāi)彈窗，清空內(nèi)容
          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 此處請(qǐng)求后端: 新增接口
          // 接口請(qǐng)求成功提示信息
          this.$message({
            showClose: true,
            message: '成功',
            type: 'success'
          });
          // 關(guān)閉對(duì)話框
          this.projectDialogParams.visible = false;
          // 更新列表數(shù)據(jù)
          this.getList();
        },
        /** 新建項(xiàng)目彈窗 end */
        /** 表格方法 */
        // 編輯按鈕
        handleEdit (id) {
          // 回顯內(nèi)容
          // TODO 此處請(qǐng)求后端: 獲取數(shù)據(jù)信息接口
          // 接口返回信息給彈窗內(nèi)容賦值，做回顯
          this.projectDialogParams.title = this.editTitle;
          this.projectDialogParams.projectId = id;
          this.projectDialogParams.projectName = '回顯的項(xiàng)目名稱';
          this.projectDialogParams.projectDescription = '回顯的項(xiàng)目描述';
          // 回顯數(shù)據(jù)賦值完成后打開(kāi)彈窗
          this.projectDialogParams.visible = true;
        },
        // 刪除二次彈窗
        // 確定按鈕
        handleDelete(index){
          // 關(guān)閉彈窗
          this.$refs[`popover-delete-${index}`].doClose();
          // TODO 此處請(qǐng)求后端: 刪除接口, 數(shù)據(jù)id 可以用  this.tableData.list[index].id  獲取
          // 刪除成功提示信息
          this.$message({
            showClose: true,
            message: '刪除成功',
            type: 'success'
          });
          // 更新列表數(shù)據(jù)
          this.getList();
        },
        // 取消按鈕
        deleteCancelButton(index){
          // 關(guān)閉彈窗
          this.$refs[`popover-delete-${index}`].doClose();
        },
        // 表格方法 start
        indexMethod (index) {
          return index + 1 + 10 * (this.queryParams.pageNum - 1);
        }, 
      },
    })
  </script>
</html>

到了這里，關(guān)于vue2組件庫(kù)：表格數(shù)據(jù)展示通用頁(yè)面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包