Question

我已经构建了一个递归组件，该递归组件可以满足我的需求。但是，我正在努力弄清楚如何以编程方式使元素保持对齐：

以下是全部内容：

    <template>
    <div class="row-creator" ref="row">
        <div v-for="(item, index) in row" :key="index" :style="[indent, newWidth]">
            <div v-if="typeof(item) === 'string'">
                <v-multi-select
                        :value="properties.filter((prop) => { return prop.target === item; })"
                        class="mb-3"
                        track-by="target" 
                        label="target" 
                        placeholder="Choose an attribute" 
                        :options="properties" 
                        :searchable="false" 
                        :allow-empty="false"
                        :show-labels="false">
                <template slot="singleLabel" slot-scope="{ option }"></template>
                </v-multi-select>

                <i class="fa fa-minus-circle"></i>
                <i class="pl-2 fa fa-plus-circle" id="addBtn"></i>
                <b-popover target="addBtn" placement="bottomleft" triggers="click">
                    <b-list-group class="list-group">
                        <b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a field</b-list-group-item>
                        <b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a group</b-list-group-item>
                    </b-list-group>
                </b-popover>
            </div>
            <div v-else>
                <v-multi-select
                        :value="options[0].key === Object.keys(item)[0] ? options[0] : options[1]"
                        class="mb-3"
                        track-by="key" 
                        label="text"
                        :options="options" 
                        :searchable="false" 
                        :allow-empty="false"
                        :show-labels="false">
                </v-multi-select>

                <i class="fa fa-minus-circle"></i>
                <i class="pl-2 fa fa-plus-circle" id="addBtn"></i>
                <b-popover target="addBtn" placement="bottomleft" triggers="click">
                    <b-list-group class="list-group">
                        <b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a field</b-list-group-item>
                        <b-list-group-item button><i class="fa fa-plus fa-2x pr-2"></i> Add a group</b-list-group-item>
                    </b-list-group>
                </b-popover>

                <row-creator
                    :row="item[Object.keys(item)[0]]"
                    :properties="properties"
                    :options="options"
                    :depth="depth + 1">
                </row-creator>
            </div>
        </div>
    </div>
</template>

    <script>
    import vMultiselect from 'vue-multiselect';

    export default {
        props: [ 'row', 'properties', 'options', 'depth' ],
        name: 'row-creator',
        components: {
            'v-multi-select': vMultiselect
        },
        computed: {
            indent () {
                return { transform: `translate(${this.depth * 20}px)` };
            },
            newWidth () {
                // return { width: this.$refs.row.clientWidth - this.depth * 20 + 'px' };
            }
        }
    };
    </script>

如何创建计算属性来调整各行的宽度？这种形式代表一个对象。保持数据对象同步的最佳方法是什么？我可以使用v模型吗？

Answer 1

请勿为此使用CSS transform。请改用margin-left！

VueJS对齐递归组件

1 个答案: