vxetable 保存选中状态

vxe-table 实现 保留选中行 row-id="id" 配合 :checkbox-config="{ highlight: true,reserve:true }" 即可实现

aaaaaa() {
    const data1 = this.getSelectData('vxeTable1')
    const data2 = this.getSelectData('vxeTable2')
    console.log('data1===>',data1);
    console.log('data2===>',data2);

},
    getSelectData(name) {
        let arr1 = this.$refs[name].getCheckboxRecords()
        let arr2 = this.$refs[name].getCheckboxReserveRecords()
        let array = []
        array = [...arr1, ...arr2]
        return array

    },

字典回显的时候调用组件返回值

<template slot-scope="scope">
    <DictTag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
  </template>

下拉组合框加 树形组件

<treeselect v-model="formInline.regfsrrwdion" :options="designDropdownData" placeholder="根节点"
@select="selectTree" placeholderStyle="color:#606266!important;" />

vxe-table 表格添加全选按钮

取消这条属性 checkStrictly: true,

checkbox-config="{
checkMethod: checkSelectable,
    // checkStrictly: true,
    trigger: 'row',
    range: true
}" 

Array转tree 全局方法

this.treeData1 = this.datatoTree(数据，父节点ID,子节点ID)

this.treeData1 = this.datatoTree(res.data)

main.js

Vue.prototype.datatoTree = datatoTree

/**
 * 数组转树形数据
 * @param {*} data
 * @param {*} id
 * @param {*} parentId
 */
export function datatoTree(data, id, parentId) {
	id = id || 'id'
	parentId = parentId || 'parentId'
	let result = []
	if (!Array.isArray(data)) {
		return result
	}
	data.forEach(item => {
		delete item.children;
	});
	let map = {};
	data.forEach(item => {
		map[item[id]] = item;
	});
	data.forEach(item => {
		let parent = map[item[parentId]];
		if (parent) {
			(parent.children || (parent.children = [])).push(item);
		} else {
			result.push(item);
		}
	});
	return result;
}

跳转路由并传值

this.$router.yxdData = response.data
const { href } = this.$router.resolve('/product')
window.open(href, '_blank');

图片变成 base64

      
        <el-upload action="" ref="reverseCardUpload" :auto-upload="false" class="upload-demo"
                :on-change="reverseCardUpload" :show-file-list="false" >
                <div class="idCover" style=" margin-top: 50px;">
                    <img src="@/assets/images/user/id2.png" alt="" v-if="ruleForm.reverseCard == ''">
                    <img :src="ruleForm.reverseCard" alt="" v-else>

                </div>
            </el-upload>


    ruleForm: {
                reverseCard: '',
            },



//身份证背面上传
        reverseCardUpload(file) {
            // 取出要上传的文件，进行处理
            const selectedFile = file.raw
            this.reverseCardName = selectedFile.name;
            // 判断是否为图片
            if (!selectedFile.type.startsWith('image/')) {
                this.$message.error('请选择图片文件')
                // 清空选择的文件
                this.$refs.reverseCardUpload.clearFiles()
                return
            }

            // 使用 FileReader 将文件转为 base64
            const reader = new FileReader()
            reader.readAsDataURL(selectedFile)
            reader.onload = () => {
                // 取出 base64 编码的字符串
                const imageData = reader.result
                //   this.ruleForm.reverseCard= imageData;
                this.$set(this.ruleForm, "reverseCard", imageData);
                this.$forceUpdate();
            }
        },

分页

页面调用

<pagination v-show="total" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="selectGroupSub" />

data 参数

 	 total:100,     
     queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

上传

<el-upload action="" ref='yxdupload' :auto-upload="false" multiple :limit="1" :on-change="handleChange"
           :file-list="files1">
    <el-button plain size="medium" type="primary">
        上传
    </el-button>
</el-upload>

handleChange(file) {
    var formData = new FormData();
    formData.append("files", file.raw);
    formData.append("relationid", this.fileCollectionDeleteData);
    formData.append("groupid", "original");
    formData.append("sortNum", this.designList.length + 1);
    uploadFile(formData).then((response) => {
        this.files1 = [];
        this.$message.success("上传成功");
        this.init()
        this.$refs.yxdupload.clearFiles()
    })
},

查看

pricode =downLoad-1621090637984038912

fielView() {
    console.log('this.selectRecordsData',this.selectRecordsData);
    if (this.selectRecordsData.length > 1) {
        this.$message.error("只能选择一个附件进行查看")
        return
    }
    console.log('11111',11111);
    downLoadAttachment( this.groupSort.id ).then(response => {
        var pricode = response.data;
        window.open(BASE.filePreviewUrl + encodeURIComponent(this.Base64.encode(document.location.protocol + '//' + location.host + process.env.VUE_APP_BASE_API + '/system/attachment/downLoadFile?pricode=' + pricode + `&fullfilename=${this.downloadFilename}` )));
    });
},

下载

pricode =downLoad-1621090637984038912

window.location.href = process.env.VUE_APP_BASE_API + '/system/attachment/downLoadFile?pricode=' + pricode

防止按钮重复点击

// yflag: false
setTimeout(res => {
    this.yflag = false
}, 3000)
if (this.yflag) return
this.yflag = true;

//防多次点击，重复提交
Vue.directive('preventReClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
});

input输入限制只能输入大写字母/数字/汉字等

1. 限制只能输入大写字母

<el-input v-model="input" oninput="value=value.replace(/[^A-Z]/g,'');"></el-input>
2. 限制只能输入数字

<el-input v-model="input" oninput="this.value = this.value.replace(/[^0-9]/g, '');"></el-input>
限制只能输入数字的情况下还是用计数器比较好，，不会为负也不能输入e等

<el-input-number v-model="input" :min="0" :max="10" :precision="0" :step="1"></el-input-number>
3.限制只能输入汉字

<el-input v-model="input" oninput="value=value.replace(/[^\u4E00-\u9FA5]/g,'');"></el-input>