This is the final resultThe general idea is to define a variable and loop through that variable to render the flowchart. Then encapsulate the flowchart file into a component. The parent component only needs to define the variable structure and values in the required format, and then pass the values to the child components.

The variable structure of the parent component is shown as follows:In Figure 2, process is the variable to be defined. The variable is the object type, and each value is a row corresponding to Figure 1. If there are multiple values in a row, more data needs to be added to the list.

The layout code above:

<template>
    <div class="process">
        <div class="process_box">
            <el-row
                v-for="(row, index) in process"
                :key="index" class="process_list"
                :ref="(row.num ! = 1? 'ref_' + getRandom() : null)"
            >
                <div
                    v-if="(row.num ! = 1)"
                    :class="[(row.num != 1 ? 'row_line' : ''), row.unset_border]"
                >
                </div>
                <div
                    v-for="(item, key) in row.list"
                    :key="key" :style="{width: item.width}"
                    :class="[ item.class_name, 'box_li', (item.clear == 'before' ? 'clear_before' : (item.clear == 'after' ? 'clear_after' : "'))],"
                >
                    {{item.label}}
                </div>
            </el-row>
        </div>
    </div>
</template>
Copy the code

Process variable structure meaning:

process: [
	{
		num: // Represents the current number of blocks and the number of squares to display in a row
		list: [
			{ // Define the block contents
				class_name: // Represents the block style - optional, currently optional: blue\grey,
				label: // Block name
				width: // Block width - Optional,
				clear: // Whether to clear the current component pseudo-class, the upper and lower lines of the block are pseudo-class implementation, clear the corresponding pseudo-class, the line is not displayed - optional, currently optional: before\after
				id: // Click the block to jump to the corresponding location on the page. Id is the id of the anchor point - Optional}}]]Copy the code

Specific implementation of the code in: VUe-simple -process you can go to download, useful to you, don’t forget to give a star