Vue+Element 弹框 el-dialog

最新推荐文章于 2024-07-02 12:11:37 发布

聆听HJ

最新推荐文章于 2024-07-02 12:11:37 发布

阅读量778

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41542329/article/details/125432283

版权

vue 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

这篇博客展示了如何在Vue.js中创建一个弹框组件用于显示历史调整记录。页面代码包含一个`Xyfxlstz`组件，当点击触发时，会显示历史记录表格。表格组件使用了Element UI库，包含多个列如调整人、调整类型等信息，并实现了分页功能。通过`init`方法初始化表格数据，同时处理`size-change`和`current-change`事件来更新当前页和每页数量。

摘要由CSDN通过智能技术生成

1、页面代码

<template>
    <div class="main">
        .....
       <!--历史调整记录-->
      <Xyfxlstz v-if="XyfxlstzVisible" ref="xyfxlstz"></Xyfxlstz>
    </div>
</template>

<script>
  import Xyfxlstz from '../xyfxda/xyfxlstzjl.vue'
  export default {
    data() {
      return {XyfxlstzVisible: false,}
    },
    components: {
      Xyfxlstz
    },
    created() {},
    methods: {
      //历史调整记录
      fxlstzxxShow(){
        this.XyfxlstzVisible = true;
        this.$nextTick(() => {
          this.$refs.xyfxlstz.init();
        })
      },
    }
  }

2、弹框组件代码

<template>
  <el-dialog title="信用风险评价历史调整记录" :visible.sync="dialogVisible" width="80%" class="tkdys" v-loading.fullscreen.lock="conCount!=totalConCount">
    <el-table :data="lstzjl" style="width: 100%" header-align="center" border :header-cell-style="headerCellStyle"
      :cell-style="cellStyle">
      <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
      <el-table-column prop="jcsx" label="调整人" align="center">
        <template slot-scope="scope">
          {{scope.row.jcsx == null || scope.row.jcsx == '' ? '-' : scope.row.jcsx}}
        </template>
      </el-table-column>
      <el-table-column prop="jcjg" label="调整类型" align="center">
        <template slot-scope="scope">
          {{scope.row.jcjg == null || scope.row.jcjg == '' ? '-' : scope.row.jcjg}}
        </template>
      </el-table-column>
      <el-table-column prop="jcjg" label="调整前风险得分" align="center">
        <template slot-scope="scope">
          {{scope.row.jcjg == null || scope.row.jcjg == '' ? '-' : scope.row.jcjg}}
        </template>
      </el-table-column>
      <el-table-column prop="jcjg" label="调整前风险类别" align="center">
        <template slot-scope="scope">
          {{scope.row.jcjg == null || scope.row.jcjg == '' ? '-' : scope.row.jcjg}}
        </template>
      </el-table-column>
      <el-table-column prop="jcjg" label="调整后得分" align="center">
        <template slot-scope="scope">
          {{scope.row.jcjg == null || scope.row.jcjg == '' ? '-' : scope.row.jcjg}}
        </template>
      </el-table-column>
      <el-table-column prop="jcjg" label="调整类别" align="center">
        <template slot-scope="scope">
          {{scope.row.jcjg == null || scope.row.jcjg == '' ? '-' : scope.row.jcjg}}
        </template>
      </el-table-column>
      <el-table-column prop="jcjg" label="调整时间" align="center">
        <template slot-scope="scope">
          {{scope.row.jcjg == null || scope.row.jcjg == '' ? '-' : scope.row.jcjg}}
        </template>
      </el-table-column>
      <el-table-column prop="jcjg" label="调整状态" align="center">
        <template slot-scope="scope">
          {{scope.row.jcjg == null || scope.row.jcjg == '' ? '-' : scope.row.jcjg}}
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px auto;">
        <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, prev, pager, next, jumper">
        </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: true,
        lstzjl:[], //历史调整记录
        // 分页
        pageIndex: 1,
        //每页条数
        pageSize: 5,
        //总条数
        totalPage: 0,
        pripid: '',
        // 预期访问接口的数量
        totalConCount: 0,
        // 正在访问的接口数
        conCount: 0,
      };
    },
    methods: {
      init (id) {
        this.dialogVisible = true;
        this.pripid = id;
        this.$nextTick(() => {
          // this.getCcjgxq();
        })
      },
      getCcjgxq(){
        this.conCount = 0;
        this.$https({
          url: this.$https.adornUrl('nbxx/getCcjgxq'),
          method: 'get',
          params: this.$https.adornParams({
            pripid: this.pripid,
            page: this.pageIndex,
            limit: this.pageSize
          })
        }).then(({
          data
        }) => {
          if (JSON.parse(this.desDecript(data.list)).length > 0) {
            this.ccjgxq = JSON.parse(this.desDecript(data.list));//JSON字符串转JSON 对象
            // this.totalPage = data.list.totalCount;
          }
          this.conCount++;
        })
      },
      // 每页数
      sizeChangeHandle(val) {
       this.pageSize = val;
       this.pageIndex = 1;
       this.getgdxx();
      },
      // 当前页
      currentChangeHandle(val) {
       this.pageIndex = val;
       this.getgdxx();
      },
      headerCellStyle: function() {
       return {
         fontSize: '15px',
         background: '#F0F7FC',
         color: '#333333'
       }
      },
      cellStyle: function() {
        return {
          color: '#000000',
          fontSize: '15px'
        }
      },
    }
  };
</script>

<style lang="less" scoped>
  .tkdys {
    /deep/ .el-dialog__body {
        padding: 10px 20px 20px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }
  }
</style>

3、效果图：