0，element-ui官网，vxe-table官网
1，只读
el-input 里面直接加 readonly属性，不可编辑，但不变色。
也可以加，disabled，这样变灰色了，用户更好理解为不可以编辑。
13，限制element的el-input输入框只能输入数字方法
https://blog.csdn.net/HD243608836/article/details/118115040 这个： oninput="value=value.replace(/[^\d.]/g,'')"
<el-input v-model="model.amount" type="text" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入总金额" />
2，el-select 用法
vue带搜索的下拉框 el-select下拉框获取选中的整个对象值 下拉框-选值后处理
/*第一种，不传参数，接收一个复杂的item*/
<el-select v-model="form.tax" placeholder="请输入税率" @change="changeTax" clearable>
<el-option
v-for="dict in dict.type.product_tax"
:key="dict.value"
:label="dict.label"
:value="dict"
></el-option>
</el-select>
changeTax(item){
console.log("changeTax===",item);
this.form.taxId=item.raw.dictCode;
this.form.tax=item.value;
},
/*第二种，传入 $event，接收 item*/
@change="handleRemoteMethodChange($event)"
// 下拉框-选值后处理
handleRemoteMethodChange(item) {
this.form.employeeIdcard = item.idCard
this.form.employeePhone = item.phone
this.form.employeeDept = item.dept
// 回填下拉框值为正确的值(el-select下拉框获取选中的整个对象值)
this.form.employeeName = item.employeeName
}
4，element-ui 表单必填校验、手机号校验
// 表单校验
rules: {
mobile: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
],
realName: [
{ required: true, message: "请输入名称", trigger: "blur" }
],
},
4 ，el-col 字段太长，显示省略号
:show-overflow-tooltip="true"
3，关于 vue 中的 <template #default="{data}">data的取值问题
1，在<vxe-form :data="assistantData"中定义了 :data，相当于给模板传值了。
2，在 <template #default="{data}"> ,这样使用。
3，在模板内部组件，v-model="data.ccusId",这样使用。
<vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">
<vxe-form-item field="role" title="Role" :span="12" :item-render="{}">
<template #default="{ data }">
<vxe-input v-model="data.age" type="number" placeholder="请输入年龄"></vxe-input>
</template>
</vxe-form-item>
</vxe-form>
<vxe-modal v-model="showAssistantEdit" :title="selectRow ? '辅助核算项-编辑&保存' : '辅助核算项-新增&保存'" width="500" min-width="600" min-height="300"
:loading="submitLoading" resize destroy-on-close>
<template #default>
<vxe-form :data="assistantData" :rules="formRules2" title-align="right" title-width="100" @submit="submitAssistantEvent">
<vxe-form-item title="客户" field="ccusId" :visible="customerShow" :item-render="{}">
<template #default="{ data }">
<vxe-select v-model="data.ccusId" transfer filterable clearable @change="assistantChange()">
<vxe-option v-for="item in customerList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
</template>
</vxe-form-item>
<vxe-form-item title="供应商" field="csupId" :visible="vendorShow" :item-render="{}">
<template #default="{ data }">
<vxe-select v-model="data.csupId" transfer filterable clearable @change="assistantChange()">
<vxe-option v-for="item in vendorList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
</template>
</vxe-form-item>
6，el-image预览图片
<el-image
slot="reference" :src="scope.row.qiniuUrl"
style="width: 100px; height: 100px; cursor:pointer;"
:preview-src-list="[scope.row.qiniuUrl]"
:fit="fit"></el-image>
7，el-select ，clearable
<el-form-item label="来源" prop="source">
<el-select v-model="queryParams.source" placeholder="请输入来源" clearable>
<el-option
v-for="dict in dict.type.customer_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
dicts: ['customer_source','customer_img_list'],
8，el-date-picker 日期下拉控件
<el-form-item label="营业执照有效期至" prop="dCertificateeDate" label-width="25%">
<el-date-picker clearable
v-model="form.dLicenceeDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择营业执照有效期至">
</el-date-picker>
</el-form-item>
9，el-button 按钮
<el-button icon="el-icon-search" size="mini" @click="goto(1)" type="primary">企查查</el-button>
10，折叠查询条件，新的
<div v-show="showQuery"><!--showQuery begin-->
<el-form-item label="现金项目" prop="cCashItem">
<el-input
v-model="queryParams.cCashItem"
placeholder="请输入现金项目"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</div><!--showQuery end-->
<el-button type="primary" size="mini" @click="showQuery=!showQuery; showQuery?queryBtn='折叠':queryBtn='展开';">{{queryBtn}}</el-button>
data() {
return {
showQuery:false,//显示，折叠
queryBtn:"展开",//折叠，展开
}
}
10，折叠查询条件，，废弃
<div v-show="showQuery"><!--showQuery begin-->
<el-form-item label="现金项目" prop="cCashItem">
<el-input
v-model="queryParams.cCashItem"
placeholder="请输入现金项目"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</div><!--showQuery end-->
<el-button type="primary" size="mini" @click="changeShowQuery">{{showQueryBtn}}</el-button>
data() {
return {
showQuery:false,//显示，折叠
showQueryBtn:"更多条件",//折叠
}
}
methods: {
changeShowQuery(){
if(this.showQuery){
this.showQuery=false;
this.showQueryBtn="更多条件";
}else{
this.showQuery=true;
this.showQueryBtn="折叠";
}
},
}
11，label宽度，label-width="150px;" ,,, label-width="25%" ,,, el-form-item
label-width="25%"
label-width="150px;"
<el-form-item label="会计期间年月" prop="iYPeriod" label-width="150px;">
<el-input
v-model="queryParams.iYPeriod"
placeholder="请输入会计期间年月"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
12，el-table-column宽度， width="150"
<el-table-column label="地址" align="center" prop="cDepAddress" width="150">
</el-table-column>
14，如何给el-table表格的指定单元格设置颜色
参考： https://blog.csdn.net/DZY_12/article/details/109772696
<el-table v-loading="loading" :data="eUserProductList" @selection-change="handleSelectionChange"
:cell-style="cellStyle">
cellStyle({row, column, rowIndex, columnIndex}) {
// console.log("---column----",column);
if (row.ifConfig && column.property=='ifConfigMsg') {
return 'color: #138D39'; // 绿色,最大值
}
}