这是根据传入的参数来判断应该渲染的图标,注意,不论在哪里,props中的属性都因该规范书写,至少提供默认值和类型,eslint检查就不会报缺少默认值的错误了。
import Vue from 'vue'
Vue.component('render-dom', {
props: {
row: {
type: Object,
default: function() {
return {}
}
},
render: {
type: Object,
default: function() {
return {}
}
},
index: {
type: Number,
default: 0
},
column: {
type: Object,
default: function() {
return {}
}
}
},
methods: {
handleClick(ev) {
ev.stopPropagation()
alert('hah')
}
},
render: function(h) {
const { safeRate, trend } = this.row
var { type, renderValue, renderOptions } = { ...this.render }
var icon = ''
if (safeRate > 0 && safeRate <= 30) {
// todo 红色
renderOptions.type = 'danger'
if (trend !== '') {
if (trend === 'up') {
icon = 'dangerup'
} else {
icon = 'dangerdown'
}
} else {
icon = ''
}
} else if (safeRate > 30 && safeRate <= 50) {
// todo yellow
renderOptions.type = 'warning'
if (trend !== '') {
if (trend === 'up') {
icon = 'warnup'
} else {
icon = 'warndown'
}
} else {
icon = ''
}
} else {
// todo green
renderOptions.type = 'success'
if (trend !== '') {
if (trend === 'up') {
icon = 'up'
} else {
icon = 'down'
}
} else {
icon = ''
}
}
return h(type, {
attrs: {
...renderOptions,
icon: icon
},
props: {
},
domProps: {
// innerHTML: `<span class="${renderOptions.icon}">${this.row[renderValue]}</span>`
}
}, this.row[renderValue] + '%')
}
})
如果想让某一段代码不被eslint检查,那么可以用 /* eslint-disable */ 将需要避免被检查的代码包裹起来。
/* eslint-disable */
there is some segment witch need avoid be check by eslint
/* eslint-disable */
这是Vue中自定义组件的写法,自定义组件中可根据需要写render,函数,这里面的是有this 变量的,而函数式组件没有this变量,相反的,Vue提供了ctx来填补这个缺口。
render: function( h, row, index ) {
return h(
"el-button",
{
'class': {
},
attrs: {
type: "success",
icon: 'el-icon-top',
size: 'mini'
},
props: {
icon: 'el-icon-search'
},
style: {
icon: 'el-icon-search'
},
domProps: {
innerHTML: 'baz'
},
on: {
click: this.handleClick
},
nativeOn: {
click: this.handleClick
}
},
[
row.profession,
h('span', {
},' el-icon-search')
]
);
}
这是函数式组件的写法,里面只有这几个元素,不含有methods属性,render函数第二个参数ctx可以有很多属性,在vue官方文档有详细说明 去到这里
export default {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: function () {
return {}
}
}
},
render: function (h, ctx) {
const params = {
row: ctx.props.row,
index: ctx.props.index
}
if (ctx.props.column) params.column = ctx.props.column
return ctx.props.render(h, params.row, params.index)
},
// methods: {a
// handleClick() {
// alert('hah')
// }
// }
}