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>