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>

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！