Vue问题汇总

一、双向数据绑定的问题

问题描述：一个list页，点击编辑数据是其中的一条。修改后，数据没有提交成功。再次点击此条数据编辑，显示的仍然是没有提交成功的数据。

解决方法：

/* 修改内容*/
    handleUpdate(row) {
      this.form = JSON.parse(JSON.stringify(row)) //this.form = row 就会有双向数据绑定的问题

}

 

二、富文本编辑器的使用

参考：vue的富文本编辑器使用

1.富文本框显示输入字数，超过限制不能输入

vue代码，maxContent 自定义最大字符数

<el-form-item label="内容" prop="content">
          <quill-editor ref="myQuillEditor" v-model="form.content" :options="editorOption" maxlength="10" @change="onEditorChange($event)" />
          <span class="wordNumber">{{ TiLength }}/{{ maxContent }}</span>
        </el-form-item>

js部分

// 富文本显示字符数
    onEditorChange(event) {
      event.quill.deleteText(this.maxContent, 7)
      if (this.form.content === '') {
        this.TiLength = 0
      } else {
        // 样式也算字符数，因为存进数据库的也包含样式
        this.TiLength = this.form.content.length - 7 // event.quill.getLength()-1 //获取实际文字长度,空格等不会计算在内
      }
    }

css

 .wordNumber{
    position: relative;
    left: 420px;
    top: -25px;
  }

这样编辑富文本的时候就只能输入限定长度的字符了，但是这个防止不了粘贴到富文本的情况。因此提交时增加一个验证即可

if (this.form.content.length > (this.maxContent+7)) {
        this.$message({ message: '内容超过500字！', type: 'warning' });
        return;
      }

 

三、动态数据验证

需求描述：一个表单，分上中下三部分。上面是必填，中间是选择项，如果中选择true则下边是必填。否则要去掉验证

vue

<el-form-item label="话题" prop="topic" :rules="[{ required: form.status === 0, message: '请输入话题标题！', trigger: 'blur' },{ min: 1, max: 20, message: '长度在20个字符', trigger: 'blur' }]">
          <el-input v-model="form.topic" clearable />
        </el-form-item>
        <el-form-item label="蓝方观点" class="blue" prop="bluePoint" :rules="[{ required: form.status === 0, message: '请输入蓝方观点！', trigger: 'blur' }]">
          <el-input v-model="form.bluePoint" clearable maxlength="20" />
        </el-form-item>
        <el-form-item label="初始人数" class="blue" prop="blueIni" :rules="[{ required: form.status === 0, message: '请填写蓝方初始票数！', trigger: 'blur' }]">
          <el-input v-model="form.blueIni" clearable type="number" min="0" />
        </el-form-item>
        <el-form-item label="红方观点" class="red" prop="redPoint" :rules="[{ required: form.status === 0, message: '请输入红方观点！', trigger: 'blur' }]">
          <el-input v-model="form.redPoint" clearable maxlength="20" />
        </el-form-item>
        <el-form-item label="初始人数" class="red" prop="redIni" :rules="[{ required: form.status === 0, message: '请填写红方初始票数！', trigger: 'blur' }]">
          <el-input v-model="form.redIni" clearable type="number" min="0" />
        </el-form-item>
        <el-form-item label="投票时间">
          <el-col :span="11">
            <el-form-item prop="begindate" :rules="[{ required: form.status === 0, message: '请选择投票开始日期', trigger: 'change' }]">
              <el-date-picker v-model="form.begindate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-indent: 1em">至</el-col>
          <el-col :span="11">
            <el-form-item prop="endDate" :rules="[{ required: form.status === 0, message: '请选择投票结束时间', trigger: 'change' }]">
              <el-date-picker v-model="form.endDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" @change="checkDate" />
            </el-form-item>
          </el-col>
        </el-form-item>

js去掉验证

 // 选择隐藏话题去除话题验证
    selectStatus() {
      if (this.form.status === 1) {
        this.$refs['form'].clearValidate(['topic', 'bluePoint', 'blueIni', 'redPoint', 'redIni', 'begindate', 'endDate'])
      } else {
        this.$refs['form'].validateField(['topic', 'bluePoint', 'blueIni', 'redPoint', 'redIni', 'begindate', 'endDate'])
      }
    }

 四、富文本编辑器去除HTML标签

由于小程序页面不能直接显示，需要去除

// 移除文本内容中的HTML 标签
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g, '')
    },

传参给后台的时候调用即可。

五、邮箱格式验证

insure_mailbox: [
  { required: this.insure_mailbox != null,
    validator: (rule, value, callback) => {
      if (value != "" && value != null) {
        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
          callback(new Error("投保人邮箱格式不正确"));
          return;
        }
      }
      callback();
    }, trigger: "click"}
]

六、手机号验证

insure_telephone: [
  { required: this.insure_telephone != null,
    validator: (rule, value, callback) => {
      if (value != "" && value != null) {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('投保人手机号码格式不正确'));
          return;
        }
      }
      callback();
    }, trigger: "click"}
]

 七、导入导出excel

参考：vue 导入导出Excel文件（使用js-xlsx库） 

特别注意，这个里面已经封装了文件选择，就不要再使用element的组件了

<el-form-item label="导入文件" >
          <el-button size="small" type="primary" @click="chengFile">选择文件<i class="el-icon-upload el-icon--right"></i></el-button>
          <span style="font-size: x-small">*只能导入.et/.xlsx/.xlsx/.csv文件</span>
        </el-form-item>

 chengFile() {
          excel.importExcel((data, dataRef) => {
            this.importInfo = "<p style=\"color: green\">读取数据中...</p>";
            for (var i = 0; i < data.length; i++) {
              this.importInfo = this.importInfo + "<p style=\"color: \">"+data[i]+"</p>";
            }
            this.importInfo = this.importInfo + "<p style=\"color: green\">读取完成，共" + data.length + "条数据！</p>";
            this.fileData = data;
          });
      }

 导出excel

<el-button type="primary" icon="el-icon-upload2" size="small" plain @click="doExport">
          <download-excel v-show="false" class="export-btn" id="exportbtn" :data="contentList" :fields="headerl" type="xlsx" :header="headName" :name="excelName"/>
        </el-button>

import JsonExcel from "vue-json-excel"

 components: {
      DownloadExcel: JsonExcel,
    }

 doExport(){
        document.getElementById("exportbtn").click()
      }

  data() {
      return {
        headerl: {
          "投保人":"tname" ,
          "被保人":"bname",
          "保险公司":"company" ,
          "投保产品":"name" ,
          "保单号":"number" ,
          "理赔类型":"claimTypeName"  ,
          "出险日期":"outDate" ,
          "申请日期":"applicationDate" ,
          "申请金额":"applicationMoney" ,
          "账单总金额":"money" ,
          "社保报销":"socialSecurity" ,
          "理赔结论" :"conclusionName",
          "理赔金额":"claimAmount" ,
          "结案日期":"closeDate" ,
          "到账日期":"arrivalDate" ,
          "备注":"remark"
        },
        headName: '',
        excelName: "理赔记录"+new Date().getTime().toString()+".xlsx"
    }
 }

 八、打包上线隐藏源代码

productionSourceMap:false

参考 https://www.e-learn.cn/topic/3632410

九、自动定位到滚动条底部

如下，一个div内的元素会动态添加，设置了overflow:auto 希望每次加载后显示最底部的数据

<el-form-item label="导入信息">
          <div v-html="importInfo" id="chatbox" style="width: 95%;height: 400px;font-size: x-small;border: 1px solid;padding-left: 10px;overflow:auto;" disabled>未选择文件</div>
        </el-form-item>

 watch: {
      importInfo(val){
        this.$nextTick(() => {
          var div = document.getElementById('chatbox');
          div.scrollTop = div.scrollHeight
        })
      }
    }

 十、下载文件不直接打开

比如一个图片的url常用的方式浏览器会打开图片，而不是下载图片，这不是我们想要的。根据这个url获取文件流数据下载，后台无需另外提供接口。

　　　　//根据url下载文件，不打开
      downloadFile (url, downloadName ) {
        var link = document.createElement('a');
　　　　　// 关键部分，无需另外提供接口
        fetch(url).then(res => res.blob()).then((blob) => {
          link.href = URL.createObjectURL(blob);
          link.download = downloadName;
          document.body.appendChild(link);
          link.click();
          //document.body.removeChild(link);
        });
      },
      // 下载点击事件
      download(row){
        //点击下载多个文件，一个保单最多有5个文件
        for(let i=0;i<row.documentsList.length;i++){
          // 根据文件id请求访问路径url
          crudQiNiu.download(row.documentsList[i].id).then((response) => {
            this.downloadFile(response.url,row.documentsList[i].fileName);
          }).catch(err => {
            this.$message({ message: err.response.data.message, type: "error" })
          })
        }

实现效果

 

十一、分页默认index,size

<el-pagination style="margin: 10px 0;" :current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :page-sizes="[10, 20,25, 50,100]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

 十二、实现复制功能

如题，用户点击复制按钮，past把信息发送给客户

copyNote(row) {
        let target = document.createElement('input') //创建input节点
        target.value = "尊敬的"+row.nickName+"，您好！您为"+row.bname+"购买的"+row.company+row.name+"将于"+row.renewalDate.substr(0,10)+"续期，续期保费为"+row.premium+"元。请您提前在绑定的尾号为"+row.bankCardNumber+"的"+row.bank+"卡内存入足够的保费。谢谢！此时，保单状态是“有效”。" // 给input的value赋值
        document.body.appendChild(target) // 向页面插入input节点
        target.select() // 选中input
        try {
          document.execCommand('Copy') // 执行浏览器复制命令
          this.$message({ message: "复制成功!", type: "success" })
        } catch {
          this.$message({ message: "复制失败!", type: "error" })
        }
      }

十三、el-admin新增菜单页面，刷新报错404

找到 /src/router/routers.js

export default new Router({
  // mode: 'hash',
  // mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})