Filter的使用:
<el-button slot="reference">{{ text | textFiler }}</el-button><!--按钮内容-->
export default {
filters: {
textFiler(txt) {
if (txt === null) {
return 'blank'
}
if (txt.trim().length <= 8) {
return txt
}
return txt.substring(0, 8)
}
}
这里可以在参数中调用过滤器,过滤器我们定义在default中,{{ 参数 | 过滤器方法 }}
,过滤器的返回值会替代他们
选择器
booleanFilter(boolean) {
const booleanMap = {
true: 'success',
false: 'danger'
}
return booleanMap[boolean]
}
根据状态从map中直接提取对应的值返回
犯错:
1,屏蔽标签的时候屏蔽错了- -
2,来参存在空参,所以subString一直报错
3,来参存在“”空字符,所以处理的时候让他通过了null的判定
前端过滤器的使用
可以将过滤器直接进行定义在filters中,
调用方法为 row.data| filter
还可以直接定义过滤方法,然后调用filter(row.data)
第一钟方法会无法调用到数据区的数据;
因为还未加载
调用组件时的传值perops
当我们调用组件时如果props指定了必要,也就是
requied
为true
时就必须传值
type: {
type: String,
required: false,
default: 'text'
},
当为false时我们必须指定一个默认值,
必须配置类型:
值的类型包括String
,Number
,Array
,Object
。。。
Arrya的类型默认值必须为函数方法。可以这样指定
可以像这样在组件中准备一个方法
然后父组件调用他的时候这样指定父组件的方法给他调用,@子组件调用父组件时的字段名=父组件中的方法调用