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>

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