360企业安全浏览器兼容模式显示异常某个内容不显示 偶发现象 本地无法复现情况js

360企业安全浏览器兼容模式显示异常 ,现象测试环境频发 ,本地连测试无法复现,线上反馈问题。
出现问题的电脑为windows且使用360企业安全浏览器打开兼容模式可复现

在这里插入图片描述

复现过程:

不直接点击超链接跳转页面 ,登录后直接通过出问题的页面的全链接访问成功复现问题。

解决方案和过程

通过控制台打印出localStorage里的内容看所取得数据是否存在 ,在看使用的方法是否兼容不同浏览器 ,可能部分数组的方法不兼容导致, 因为我这个是取的vueX里的内容 要先看能否打印出来,多次尝试后发现税率列表没有取到。所以要在页面加载前保证税率列表存在

在这里插入图片描述

<el-table-column
                prop="taxRate"
                label="税率"
                width="60"
                align="right"
              >
                <template slot-scope="scope">
                //vue的mixins混入功能
                  <span> {{ getTaxRateName(scope.row.taxRate) }} </span>
                </template>
              </el-table-column>

相关知识点
mixins使用一、局部混入:

1)、混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

2)、选项合并

当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。

比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先

①:新建minxins.js文件

import { mapState } from 'vuex'
export default {
  data() {
    return {
      // taxRateList: []
    }
  },
  computed: {
    ...mapState(['taxRateList'])
  },
  mounted() {},
  methods: {
    /**
     * 获取 税率字典list
     * @returns {Promise<void>}
     */
    // async getTaxrateList() {
    //   let list = await this.$api.common.***({
    //     classCode: 'taxRate'
    //   })
    //   this.$set(this, 'taxRateList', list)
    // },
    /**
     * 通过税率code  返回相应名称
     * @param code
     * @returns {*}
     */
    getTaxRateName(code) {
      if (this.taxRateList.length) {
        let rate = this.taxRateList.find(t => t.codeCode == code)
        if (rate) {
          return rate.codeName
        }
        return ''
      }
    },
    /**
     *  返回税率名称,过滤掉百分号
     * @param code
     * @returns {*}
     */
    getTaxRate(code) {
      let name = this.getTaxRateName(code)
      if (name && name.endsWith('%')) {
        return name.slice(0, -1)
      }
      return ''
    }
  }
}

在这里插入图片描述

import mixins from '@/mixins'

Vue.mixin(mixins)
Vue.use(VueCookies)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这么贴心不给个关注吗~~

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2024-03-22 19:02:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-22 19:02:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-22 19:02:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-22 19:02:01       20 阅读

热门阅读

  1. 回文素数

    2024-03-22 19:02:01       20 阅读
  2. 蓝桥杯 完全二叉树的权值

    2024-03-22 19:02:01       24 阅读
  3. 【医疗-单位计算】

    2024-03-22 19:02:01       20 阅读
  4. CAS(compare and swap)算法

    2024-03-22 19:02:01       20 阅读
  5. 【NLP5-RNN模型、LSTM模型和GRU模型】

    2024-03-22 19:02:01       17 阅读