vue list 列表绑定的数据 发现太长 能挪哪里去不

Question

父级模板

<div>
    <p id="proPanelTitle" class="proPanelSeparate">属性面板</p>
    <div class="proPanelSeparate">
        <p class="proPanelTitle2">组件名:</p>
        <p id="compName"></p>
    </div>
    <div id="proPanelContent1" >
        <div class="proPanelSeparate">
            <p><span class="proPanelTitle2">行：</span><input class="proPanelInput" type="number" value="4"/></p>
            <p><span class="proPanelTitle2">列：</span><input class="proPanelInput" type="number" value="4"/></p>
        </div>
        <div class="proPanelSeparate" >
            <p class="proPanelTitle2">单元格设置</p>
            <button class="proPanelBtn">合并单元格</button>
            <button class="proPanelBtn">拆分单元格</button>
            <select-custom id="select1" defaultStr="设置单元格"   :selectedItems="[{message:'普通单元格'},{message:'可选单元格'},{message:'隐藏单元格'}]" ></select-custom>
            <select-custom id="select2" defaultStr="设置表头"  ></select-custom>

        </div>
    </div>
    <div id="proPanelContent2" style="display: none;">
        <div class="proPanelSeparate">
            测试
        </div>
        <div class="proPanelSeparate" >
            测试
        </div>
    </div>
</div>

子模板

<div class="proPaneSelect">
    <button class="proPanelBtn" @click="toggleListHandler">{{ btnLabel }}<span>◢</span></button>
    <ul class="proPaneUl" style="display:none">
        <li class="proPaneLi" v-for="item in items" @click="selectedHandler">
            {{ item.message }}
        </li>
    </ul>
</div>

Vue.component('select-custom', {
        template: System.getTxt('./proPanel/selectUI.html'),
        data: function () {
            return {
                items: this.selectedItems,
                btnLabel:this.defaultStr
            };
        },
        props: {
            id: String,
            defaultStr:String,
            selectedItems:Array
        }       
    });

Answer 1

换行就可以了

<select-custom id="select1" defaultStr="设置单元格"   
:selectedItems="[{message:'普通单元格'},{message:'可选单元格'},{message:'隐藏单元格'}]" >
</select-custom>

或者吧这些数据放到 data里面去

data () {
    return {
         customData: [// 你的数据....]
    }
}

<select-custom id="select1" defaultStr="设置单元格"  :selectedItems="customData" >
</select-custom>