vue常用

最新推荐文章于 2023-11-09 23:29:00 发布

原创最新推荐文章于 2023-11-09 23:29:00 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了前端开发中的多种实用技巧，包括使用Vue.js进行DOM操作、动态图片加载、表格扩展及样式调整等内容。此外还涉及了如何通过正则表达式验证邮箱格式的方法。

foreach：

this.notiDetail.forEach((item) => {

this.receivePersonIds.push(item.id);

})

filter：

this.geoCoordMapData.filter(v => {
  if (v.areaName == data.name) {
    this.getAreaInfo(v.areaCode)
  }
})

动态拼图片：

表格加一列：

头

<el-table-column type="selection" width="45"></el-table-column>
        <el-table-column width="50">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover" :content="'等保测评到期日期：'+scope.row.evaluate_time">
              <div slot="reference" style="margin-top:8px;" v-if="scope.row.evaluate==='0'">
                <icon name="greenWarning" scale="2"></icon>
              </div>
            </el-popover>
          </template>
        </el-table-column>

尾

<el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <a v-if="recordTypeNum==='0'" style="color:green" @click="singleJudge(scope.row)">审核</a>
            <a v-else style="color:green" @click="singleDelete(scope.row)">删除</a>
          </template>

</el-table-column>

动态高度：

:style="{height: maxHeight+'px'}"

动态style

:style="{'cursor':'pointer','color':(area.serviceExceptionalStatus == 1 ? 'white':'#dd0c0c')}"

新窗口打开：

window.open(this.studyURL, '_blank');

带参数的路由跳转：

this.turnPageSearch({ search: "4" });

this.$router.push('fileList/fileDetail')

页面销毁执行的操作

beforeDestroy() {
this.turnPageSearch({ search: "", status: "", evaluate: "fill" });
clearInterval();
},

//导出模板
    exportExample() {
      let baseURL = this.axios.defaults.baseURL
      let index1 = baseURL.indexOf('/gacenter')
      let head = baseURL.substring(0, index1) + '/gacenter';
      window.location.href = head + '/excel/继续教育学员详情模板.xls';
    },

// 触发主页面点击，消除弹框

$('body').trigger('click');

// 校验邮箱

let reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
      if (!reg.test($.trim(this.mail))) {
        this.alertToggle({
          alertType: 'danger',
          alertContent: '请输入正确格式的邮箱'
        })
        return;
      }

// 子向父传值

子：this.$emit('onAdvanceReset', null)

父标签内：@onAdvanceReset='onAdvanceReset'

onAdvanceReset() {
this.reset();

// 循环遍历内容显示

// 模态框

// 全局遮罩

let load = this.$loading({
        lock: true,
        text: "正在加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        fullscreen: true
      });

load.close();