vue

最新推荐文章于 2024-09-11 22:09:42 发布

张小凡2014

最新推荐文章于 2024-09-11 22:09:42 发布

阅读量194

点赞数

文章标签： vue.js javascript elementui 前端 ecmascript

本文链接：https://blog.csdn.net/baihezzs/article/details/126309162

版权

动态组件

<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');

张小凡2014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue

动态组件<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" ...
复制链接

扫一扫