cr/src/view/columns/columns.vue

<template>
    <div class="accessories_page">
        <div id="child_menu">
	        <div class="left">
		        <label>行数</label>
		        <input type="text" style="width: 40px" v-model="sum_copy"/>
		        <label @click="changeSum" style="cursor: pointer">确认</label>
	        </div>
	        <ul>
                <li  v-on:click="selectNav('单列')" v-bind:class="select_nav == '单列'? 'active' : ''">单列</li>
                <li  v-on:click="selectNav('多列')" v-bind:class="select_nav == '多列'? 'active' : ''">多列</li>
	        </ul>
            <div class="right">
                <label>设置</label> &nbsp;&nbsp;&nbsp; <label>删除</label>
            </div>
        </div>
        <child v-bind:sum="this.sum"></child>
        <div class="tab-container">
            <div class="container">
                <div class="tab-container-box" v-if="select_nav == '单列'"><singleColumn></singleColumn></div>
                <div class="tab-container-box" v-if="select_nav == '多列'"><multiColumn></multiColumn></div>
            </div>
        </div>
    </div>
</template>
<script>
import child from '@/components/common/list';
import singleColumn from '@/view/columns/singleColumn';
import multiColumn from '@/view/columns/multiColumn';

let data = () => {
  return {
    collapsed: false,
	sum:1,
    sum_copy:1,
    select_nav: '', //导航选中
  }
}

let changeSum = function(){
    this.sum = this.sum_copy * 8
}

//选择展示哪个容器
let selectNav = function(str){
    this.select_nav = str;
}

export default {
    data: data,
    methods: {
      changeSum,
      selectNav
    },
    components:{
      child,
      singleColumn,
      multiColumn
    }
}
</script>