动态组件
<template>
<div style="margin-top: 1em;">
<el-form :inline="true" :model="model" class="demo-form-inline">
<el-form-item v-for="(item,attr) in form" :key="attr" :label="item.option.placeholder||''">
<component :is="item.assembly" v-bind="item.option" v-model="model[attr]"></component>
</el-form-item>
</el-form>
<el-button @click="cc">cc</el-button>
</div>
</template>
<script>
export default {
name: "search.vue",
components: {},
props: {
attr: {
type: Array,
default: [
'name,el-input|placeholder:test,clearable:true',
]
}
},
data() {
return {
model: {},
form: {},
}
},
watch: {},
created() {
var _this = this;
this.attr.forEach(item => {
var before, option;
[before, option] = item.split('|');
if (option) {
var jsonStr = '{' + option.replace(/([^,:\s]*)/g, '"$1').replace('"true"', 'true').replace('"false"', 'false') + '}'
console.log('rs ',jsonStr)
option = JSON.parse( jsonStr )
console.log('rs ',option)
}
_this.form[before.split(',')[0]] = {
assembly: before.split(',')[1],
option: option || {},
}
})
console.log('rs ', this.form)
},
methods: {
cc: function(data) {
console.log('rs ', this.model)
}
}
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
</style>
格式化
"html":
{
// Rules added here apply only to HTML-like files, as determined by the
// rules specified for `global_file_rules` in the plugin settings. They
// take precedence over all of the settings in the 'all' category above.
// You can add other .jsbeautifyrc rules in this section too.
// e.g. {{#foo}}, {{/foo}}
"indent_handlebars": false,
"wrap_attributes": "force-aligned",
// Indent <head> and <body> sections
"indent_inner_html": false,
// [keep|separate|normal]
"indent_scripts": "keep",
// List of tags that should not be reformatted. This should generally not be needed.
"unformatted": ["script"],
},
['attr'] 属性有时无法更新
this.$set(this.model,'name','value');
