cr/src/view/outlyingRow/outlyingRow.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>
                <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 == '线下行'"></div>
                <div class="tab-container-box" v-if="select_nav == '表上行'"></div>
                <div class="tab-container-box" v-if="select_nav == '表下行'"></div>
                <div class="tab-container-box" v-if="select_nav == '框外行'"></div>
            </div>
        </div>
    </div>
</template>
<script>
import child from '@/components/common/list';

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,
    }
}
</script>