vue項目實戰 element ui 動態表單和表格校驗以及vue-pdf pdf預覽

<!-- * @Description: 動態表單的驗證;表格的驗證 usualElementStudy/dymicFrom.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-07-20 10:43:20 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:36:53 --> 

<!--  -->
<template>
  <div class="dymic-from-content-box">
    <h1>動態表單的校驗</h1>
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="demo-dynamic">
      <el-form-item v-for="(item,index) in dynamicValidateForm.formDataList" :label="'課程名稱：' + item.title" :key="item.id" :prop="`formDataList.${index}.name`" :rules="{ required: true, message: `${item.title}課程名稱不能為空`, trigger: ['blur','change'] }"
      >
        <el-input v-model="item.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <h1>表格校驗</h1>
    <el-form :model="tableForm" ref="tableForm">
      <el-table :data="tableForm.tableData" border style="width: 100%">
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="tableRules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="年齡">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.age`" :rules="tableRules.age">
              <el-input v-model="scope.row.age"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item>
        <el-button type="primary" @click="submitForm('tableForm')">提交</el-button>
        <el-button @click="resetForm('tableForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <h1>限制輸入條件性的輸入</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item>
        <el-input v-model="form.vaule1" oninput="value=value.replace(/[^\d]/g, '')" placeholder="只能輸入數字"
        ></el-input>
        <el-input v-model="form.vaule2" oninput="value=value.replace(/[^0-9.]/g, '')" placeholder="只能輸入數字和小數"
        ></el-input>
        <el-input v-model="form.vaule3" oninput="value=value.replace(/[^\d.]/g, '')" placeholder="只能輸入數字和小數"
        ></el-input>
      </el-form-item>
    </el-form>
    <h1>vue-pdf插件pdf預覽效果</h1>
    <div>
      <div class="pdf">
        <div class="pdf-tab">
          <!-- 頁簽展示 -->
          <div :class="['btn-def',{'btn-active':activeIndex==index}]" v-for="(item,index) in pdfList" :key="index" @click.stop="pdfClick(item.pdfUrl,index)"
          >{{item.title}}</div>
        </div>
        <pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i"></pdf>
      </div>
    </div>
  </div>
</template>

<script> import pdf from "vue-pdf"; export default { components: { pdf }, data() { //這里存放數據
    return { pdfList: [ { pdfUrl: "http://file.gp58.com/file/2018-11-14/111405.pdf", title: "中信證券觀點" }, { pdfUrl: "https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf", title: "12月投資月刊" } ], pdfUrl: "", numPages: 1, activeIndex: 0, form: { vaule1: "", vaule2: "", vaule3: "", vaule4: "" }, dynamicValidateForm: { formDataList: [ { id: 1, title: "vue", name: "" }, { id: 2, title: "react", name: "" }, { id: 3, title: "angluar", name: "" }, { id: 4, title: "node", name: "" } ] }, tableForm: { tableData: [ { name: "", age: "" } ] }, tableRules: { // 姓名
 name: [ { required: true, message: "請輸入姓名", trigger: ["blur", "change"] }, { max: 20, message: "長度在20個字符以內", trigger: ["blur", "change"] } ], //年齡
 age: [ { required: true, message: "請輸入年齡", trigger: ["blur", "change"] }, { max: 20, message: "長度在20個字符以內", trigger: ["blur", "change"] } ] } }; }, methods: { pdfTask(pdfUrl) { let self = this; let loadingTask = pdf.createLoadingTask(pdfUrl); // console.log(loadingTask,'loadingTask')
      // return
 loadingTask.promise .then(pdf => { self.pdfUrl = loadingTask; self.numPages = pdf.numPages; }) .catch(err => { console.error("pdf加載失敗"); }); }, // 點擊tab時候
 pdfClick(pdfUrl, index) { if (index == this.activeIndex) return; this.activeIndex = index; this.pdfUrl = null; this.pdfTask(pdfUrl); }, // 校驗表單
 submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, // 重置表單
 resetForm(formName) { this.$refs[formName].resetFields(); } }, created() { // console.log("表單的處理");
 let a = Object(new Array(5)) // console.log(a,'a',typeof(a))
 let b = new Array(5) // console.log(b,'b',typeof(b))
 }, mounted() { this.pdfTask(this.pdfList[0].pdfUrl); } }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>

<!-- * @Description: element ui表格的常規用法 usualElementStudy/elementTable.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-05 10:43:26 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:37:05 -->
<template>
  <div class="element-table-box">
    <div class="search-box">
      <el-input v-model="searchName" placeholder="請輸入崗位" clearable style="max-width: 200px"></el-input>
      <el-button type="primary" class="serach-btn" icon="el-icon-search" @click="searchData" style="max-width: 200px; margin-left: 10px;"
      >查詢</el-button>
    </div>
    <el-table class="mt10" :data="pageData.tableData" :height="tableHeight" ref="multipleTable" style="width: 100%" :row-key="row => row.id" @selection-change="handleSelect" border tooltip-effect="dark" :row-style="{height:'32px'}" :header-row-style="{height:'32px'}" :cell-style="{padding:'2px'}" v-loading="loading" element-loading-text="表格數據加載中..."
    >
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
      <el-table-column type="index" width="55" align="center" label="序號"></el-table-column>
      <el-table-column prop="roleName" :label="'崗位名稱\n（角色）'" align="center"></el-table-column>
      <el-table-column prop="creator" label="創建者" align="center"></el-table-column>
      <el-table-column prop="createTime" label="創建時間" align="center"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">編輯</el-button>
          <el-button type="text" size="small" @click="moveUp(scope.$index, pageData.tableData)">上移</el-button>
          <el-button type="text" size="small" @click="moveDown(scope.$index, pageData.tableData)">下移</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"
    ></el-pagination>
  </div>
</template>

<script> import { mapState } from "vuex"; export default { data() { //這里存放數據
    return { loading: false, searchName: "", pageData: { currentPage: 1, pageSize: 10, total: 0, tableData: [], }, }; }, computed: { ...mapState({ tableHeight: (state) => state.commonInfo.contentBoxHeight - 180, }), }, created() { this.getPageList(); }, mounted(){ console.log('組件里面的鈎子--mounted后') }, methods: { // pageSize
 handleSizeChange(pageSize) { // console.log(`每頁 ${pageSize} 條`);
      this.pageData.pageSize = pageSize; this.getPageList(1, pageSize); }, // 當前頁
 handleCurrentChange(currentPage) { // console.log(`當前頁: ${currentPage}`);
      this.getPageList(currentPage); }, // 查詢
 searchData() { this.getPageList(1); }, // 列表數據
 getPageList( currentPage = this.pageData.currentPage, pageSize = this.pageData.pageSize ) { this.pageData.currentPage = currentPage; this.pageData.pageSize = pageSize; const pageData = { pageNo: currentPage, pageSize: pageSize, }; let data = { roleName: this.searchName, pageData: pageData, } this.loading = true; this.$http.infoList.roleList(data).then((res) => { if (res.returnResult === 200) { // console.log(res, "res角色");
          this.loading = false; this.pageData.tableData = res.returnData.data || []; this.pageData.total = res.returnData.recordCount; } }) }, // 跨頁勾選
 handleSelect(val){ console.log(val,'跨頁選中數據') }, // 編輯
 handleEdit(row){ console.log(row) this.$router.push({ name:'tableDetail', query:{ id: row.id } }) } }, }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 .search-box { display: flex; margin-right: 10px;
}
</style>

<!-- * @Description: 詳情 usualElementStudy/tableDetail.vue * @Version: 2.0 * @Autor: lhl * @Date: 2020-08-07 10:15:04 * @LastEditors: lhl * @LastEditTime: 2020-08-20 17:37:15 -->
<!--  -->
<template>
  <div class="table-detail-content">詳情界面</div>
</template>

<script> import { browserType, URL, getQueryString } from '@/util/public' export default { components: { }, data() { //這里存放數據
    return {}; }, created() {}, mounted() { // alert(browserType())
    // alert(URL.get('id'))
    // alert(getQueryString('id'))
 }, methods: {}, }; </script>
<style lang='scss' scoped> //@import url(); 引入公共css類 </style>

  以上代碼本人項目實測！！！真實可靠，請勿隨意轉載~轉載請注明出處~~~謝謝合作！