1.使用el-table 插槽的时候出现了插槽失效问题,slot-scope="scope"
我是用的v-show结果每次template组件渲染不会重新编译
<el-table-column prop="totalSo" :label="$t('semsVue.Homepagec.SO')">
<template slot-scope="scope" v-if="(scope.row.totalSo > 0)">
<div>{
{scope.row.totalSo+ "k"}}</div>
</template>
</el-table-column>
<el-table-column prop="pendingSo" :label="$t('semsVue.Homepagec.PendingSO')">
<template slot-scope="scope" v-if="(scope.row.pendingSo > 0)">
<div>{
{scope.row.pendingSo===0 ? "0" : scope.row.pendingSo + "k"}}</div>
</template>
</el-table-column>
我直接把v-if写在了标签上面导致插槽失效，
正确做法我们应该把v-show或者v-if写在template模板上面,然组件每次渲染都会重新去编译2.使用vant中List组件中load事件触发多次问题
问题分析: 1.是否是样式导致的? 2.loading变量赋值问题? 3.是否加 :immediate-check="false"属性是否在初始化时立即执行滚动位置检查
1.首先我们需要把父级容器overflow:属性删掉如果在 html 和 body 标签上设置了overflow-x: hidden样
式，会导致 List 一直触发加载。这个问题的原因是当元素设置了overflow-x: hidden样式时，该元素的
overflow-y会被浏览器设置为auto，而不是默认值visible，导致 List 无法正确地判断滚动容器。解决
方
法是去除该样式，或者在 html 和 body 标签上添加height: 100%样式。
2.是否使用了float布局，如果使用了可以在容器上添加van-clearfix类名来清除浮动，使得 List 能正确
判断元素位置
3.排除了前面几种问题后，仍然无法解决，还是会多次触发load事件。可以考虑是否是loading变量赋值的问
题，首先进入load事件直接给loading赋值为true，然后在ajax后获取成功后将loading赋值为false。最
后 在数据全部加载完成后将finished设置为true，即可。
案例1:
onLoad() {
this.loading = true;
this.pageNum += 1; // 请求页数+1
this.getNotice() // 请求函数
// 在函数获取成功后设置 this.loading = false;
if (this.listLength === 0) { // 结束加载情况判断
this.finished = true
}
},
案例2:
scrollonLoad() {
this.loading = true;
// 异步更新数据
setTimeout(() => {
this.pagination.pageNo = this.pagination.pageNo + 1;
getconnector({ ...this.pagination }).then(res => {
this.tablelist = this.tablelist.concat(res.data.records);
this.total = res.data.total;
});
// 加载状态结束数据全部加载完成
if (this.tablelist.length >= this.total) {
this.finished = true;
this.loading = false;
}
}, 1000);
},
案例3:// 滚动下拉异步更新数据使用防抖函数触发下拉加载
load_more: function() {
setTimeout(() => {
this.pagination.pageNo += 1;//页数+1
this.onLoad();
}, 1000);
},
onLoad() {
clienttablistcontent({ ...this.pagination }).then(res => {
if(res.code == 0){ // 加载状态结束
this.loading = false;
this.tableData = this.tableData.concat(res.data.records);//追加数据
if (this.pagination.pageNo == res.data.total || res.data.records.length == 0) { //数据全部加载完成
this.finished = true;
this.loading = false;
}else{
this.finished = false;
}
}
})
},
总结:上述的方法中使用到了数组合并.concat 合并之后在赋值给原来的数组做判断 <template>模板:
<template>模板:
methods:方法: 
3.element UI 之table表格表头过长显示省略号...显示，并添加鼠标移入悬浮显示
1、样式中添加
/deep/ .el-table .cell {
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
line-height: 23px;
padding-right: 10px;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
}
2、在需要悬浮显示的表头文字过长处添加-属性
:show-overflow-tooltip="true"
:render-header="renderHeader"
<el-table-column
prop="createdDate"
:formatter="formatter"
:show-overflow-tooltip="true"
:label="$t('semsVue.Homepaget.SubmittedTime')"
:render-header="renderHeader"
></el-table-column>
3、methods中添加：
renderHeader(h, data) {
return h("span", [
h(
"el-tooltip",
{
attrs: {
class: "item",
effect: "dark",
content: data.column.label,
placement: "top",
},
},
[h("span", data.column.label)]
),
]);
},
4.本地数组做模糊查询-匹配查询-，未过滤出新数组。
1.实现目的，搜索后台返回的数组是否 包含 某个姓名或者年龄 模糊查询-匹配查询 然后去做v-for
<van-search
v-model="CusInfo.customerAgreementCode"
shape="round"
background="#fff"
:placeholder='$t("lang.customerprofile.Search")'
@clear="clear"
@search="fiflterserach"
>
<div
class="customerprice-card"
v-for="(item,index) in findItem"
:key="index"
@click="PriceDetail(item)"
>
<div class="customerprice-card-content">
<div class="fontnum">{
{item.customerModel}}</div>
<div class="fonten">{
{item.categoryName}}</div>
</div>
</div>
methods: {
// 匹配查询搜索逻辑 后台返回的customerModel和你输入的value是否===匹配一致
fiflterserach() {
this.findItem = this.ItemDetail || [];
this.findItem = this.ItemDetail.filter(item => {
return item.customerModel === this.CusInfo.customerAgreementCode
});
},
// 模糊查询搜索逻辑 -indexOf-后台返回的customerModel是否包含你输入的model或者value
dimfiflterserach() {
this.findItem = this.ItemDetail || [];
this.findItem = this.ItemDetail.filter(item => {
return item.customerModel.indexOf(this.CusInfo.customerAgreementCode)>-1
});
},
}
this.ItemDetail是一个数组后台返回给我的数据刚开始我是直接拿this.ItemDetail做v-for的
总结:由于我直接修改原数组导致我每次过滤查询的时候都搜索不到后台返回给我的数据，
解决方案: 用一个新的空数组去装原数组然后再去做v-for
https://www.cnblogs.com/rysinal/p/5834446.html5.JS实现千分位计算-使用场景价格计算
这里我是封装了一个公共的js然后导入使用就可以了
export function NanN(val) {
if (isNaN(val) || val == 0) {
return '-'
} else {
const mark = ',' // 加什么分隔符
const counts = 3 // 几分位 3表示千分位
val = val.toString().split('.')
var tempAry = val[0].split('').reverse()
var res = []
for (var i = 0, len = tempAry.length; i < len; i++) {
if (i % counts === 0 && i !== 0) {
res.push(mark)
}
res.push(tempAry[i])
}
res.reverse()
if (val[1]) {
res = res.join('').concat('.' + val[1])
} else {
res = res.join('')
}
return res
}
}
方法:
filters: {
Amountthousands: function (val) {
return NanN(val)
}
},6.filter与三元结合遇到的问题：VUE三目嵌套.filter过滤器失效问题
<el-table-column
prop="amount"
:label="$t('semsVue.baseDate.AmountRate')"
min-width="120"
:showOverflowTooltip="true"
>
<template slot-scope="scope">
<span :class="amountisActive(scope.row)">
{
{ parseInt(scope.row.amount.toString()) == parseFloat(scope.row.amount.toString())
? scope.row.amount
: $options.filters['filterTotalDiscount'](scope.row.amount)
}}
</span>
</template>
</el-table-column>7.适用于金额保留小数点后两位，输入的值不能大于100
data() {
var newgp = (rule, value, callback) => {
let pattrn =
/^\d\.([1-9]{1,2}|[0-9][1-9])$|^[0-9]\d{0,1}(\.\d{1,2}){0,1}$|^99.999(\.0{1,2}){ 0,1}$/
if (!pattrn.test(value)) {
callback(new Error('The scale cannot be greater than 100'))
} else {
callback()
}
}
// 金额只保留两位小数
var newamount = (rule, value, callback) => {
var pattrnmount = /^\d+(\.\d{2})?$/
if (!pattrnmount.test(value)) {
callback(new Error('Illegal amount!'))
} else {
callback()
}
}
return {
DetailsRules: {
// 金额校验只保留两位数-产品没说-我们就不做限制-
setdiscountAmount: [{ validator: newamount, required: true, trigger: 'blur' }],
// 比例除了100传给后端不能大于1
setdiscountRate: [{ validator: newgp, required: true, trigger: 'blur' }]
},
},
}8.实现一个树状的el-select下拉
<el-select
v-model="pagination.area"
filterable
clearable
@clear="handleClear"
ref="selectUpResId"
:placeholder="$t('semsVue.placehoder.pleaseselect')"
>
<el-option
hidden
key="parentCode"
:value="pagination.code"
:label="pagination.label"
>
</el-option>
<el-tree
:data="inspectionObjectOptions"
:props="defaultProps"
:expand-on-click-node="false"
:check-on-click-node="true"
@node-click="handleNodeClick"
node-key="code"
:default-expanded-keys="ShowOnlyTheFirstFew"
>
</el-tree>
</el-select>