base mode list blog 技術 mod bin on() :focus

<?php /** * Created by PhpStorm. * User: 信息部 * Date: 2017/10/26 * Time: 13:10 */
use PSI\assets\VueAsset; VueAsset::register($this);
$this->title=‘角色添加‘; ?> <style> .labels{ vertical-align:middle; margin:0; display:inline-block; height:100%; } .lineHeight{ height:20px; } .fontWeight{ font-size:16px; font-weight:bold; padding:5px; } ul.nav-tabs>li.active>a, ul.nav-tabs>li.active>a:hover, ul.nav-tabs>li.active>a:focus { background-clip: padding-box; border:none; border-bottom: 2px solid blue; color:blue; } </style> <script type="text/x-template" id="item-template"> <div > <div class=‘container‘> <h1>添加角色</h1> <div class="row"> <label for="roleName" class="col-sm-2 control-label labelS">角色名稱</label> <div class="col-sm-4 "> <input type="email" class="form-control" v-model=‘roleName‘ id="roleName" placeholder="請輸入名稱"> </div> </div> <div class=‘lineHeight‘></div> <div class="row"> <label for="" class="col-sm-2 control-label">角色描述</label> <div class="col-sm-4"> <textarea class="form-control" v-model=‘descrption‘ rows="3"></textarea> </div> </div> <div class=‘lineHeight‘></div> <div class="tabs-wrapper"> <ul class="nav nav-tabs" role="tablist"> <li v-for="(item,index) in datas.system" v-bind:class="{active:index==0}" role="presentation" ><a :href="item.hrefs" :aria-controls="item.ids" role="tab" data-toggle="tab">{{item.ststemName}}</a></li> </ul>
<!-- Tab panes --> <div class="tab-content"> <div v-for=‘(item,index) in datas.system‘ role="tabpanel" class="tab-pane" :class="{active:index==0}" :id="item.ids"> <div v-for=‘item in item.worker‘ class=‘row‘> <div class="fontWeight">{{item.values}}</div> <div class=‘col-sm-3‘ v-for=‘item in item.fusers‘> <input type="checkbox" :value="item.values" v-model="checkedNames"> <label for="jack">{{item.values}}</label> </div> </div> </div> <div>{{checkedNames}}</div> </div> </div> <div><button class=‘btn btn-primary‘ v-on:click="subData" >提交</button></div> </div> </div> </script> <div id="demo"> <item ></item>
</div> <script> <?php $this->beginBlock(‘js‘) ?> var client = axios.create({ baseURL: ‘‘, timeout: 5000, responseType: ‘json‘, // default headers: { ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=UTF-8‘ }, withCredentials: false, transformResponse: [ function(data) { return data } ] }); Vue.component(‘item‘, { template: ‘#item-template‘, props:{ model: Object }, data: function () { return { roleName:‘‘, descrption:‘‘ , checkedNames: [], datas:{ system:[ {ids:"personSystem", hrefs:"#personSystem", ststemName:‘人事系統‘, worker: [ { values: ‘員工1‘, fusers: [ { values: ‘1‘ }, { values: ‘2‘ }, { values: ‘3‘ }, { values: ‘4‘ },{ values: ‘5‘ },{ values: ‘6‘ } ], }, { values: ‘考勤1‘, fusers:[ { values: ‘0‘,name:"xingmulishjf" }, { values: ‘-1‘ }, { values: ‘7‘ }, { values: ‘8‘ } ] }, { values: ‘薪資1‘, fusers:[ { values: ‘9‘ }, { values: ‘10‘ }, { values: ‘11‘ }, { values: ‘12‘ } ] } ] }, // 人事end
{ids:"financeSystem", ststemName:‘財務系統‘, hrefs:"#financeSystem", worker: [ { values: ‘員工2‘, fusers: [ { values: ‘13‘ }, { values: ‘14‘ }, { values: ‘15‘ }, { values: ‘16‘ },{ values: ‘17‘ },{ values: ‘18‘ } ], }, { values: ‘考勤2‘, fusers:[ { values: ‘19‘ }, { values: ‘20‘ }, { values: ‘21‘ }, { values: ‘22‘ } ] }, { values: ‘薪資2‘, fusers:[ { values: ‘23‘ }, { values: ‘24‘ }, { values: ‘25‘ }, { values: ‘26‘ } ] } ] }, {ids:"cashier", hrefs:"#cashier", ststemName:‘收銀系統‘, worker: [ { values: ‘員工3‘, fusers: [ { values: ‘27‘ }, { values: ‘28‘ }, { values: ‘29‘ }, { values: ‘30‘ },{ values: ‘31‘ },{ values: ‘32‘ } ], }, { values: ‘考勤3‘, fusers:[ { values: ‘33‘ }, { values: ‘34‘ }, { values: ‘35‘ }, { values: ‘36‘ } ] }, { values: ‘薪資3‘, fusers:[ { values: ‘37‘ }, { values: ‘38‘ }, { values: ‘39‘ }, { values: ‘40‘ } ] } ] }, {ids:"sale", hrefs:"#sale", ststemName:‘進銷存‘, worker: [ { values: ‘員工4‘, fusers: [ { values: ‘41‘ }, { values: ‘42‘ }, { values: ‘43‘ }, { values: ‘44‘ },{ values: ‘45‘ },{ values: ‘46‘ } ], }, { values: ‘考勤4‘, fusers:[ { values: ‘47‘ }, { values: ‘48‘ }, { values: ‘49‘ }, { values: ‘50‘ } ] }, { values: ‘薪資4‘, fusers:[ { values: ‘51‘ }, { values: ‘52‘ }, { values: ‘53‘ }, { values: ‘54‘ } ] } ] }, {ids:"companyManger", hrefs:"#companyManger", ststemName:‘企業管理‘, worker: [ { values: ‘員工5‘, fusers: [ { values: ‘55‘ }, { values: ‘56‘ }, { values: ‘57‘ }, { values: ‘58‘ },{ values: ‘59‘ },{ values: ‘60‘ } ], }, { values: ‘考勤5‘, fusers:[ { values: ‘61‘ }, { values: ‘62‘ }, { values: ‘63‘ }, { values: ‘63‘ } ] }, { values: ‘薪資5‘, fusers:[ { values: ‘64‘ }, { values: ‘65‘ }, { values: ‘66‘ }, { values: ‘67‘ } ] } ] }, {ids:"backSystem", hrefs:"#backSystem", ststemName:‘後臺系統‘, worker: [ { values: ‘員工6‘, fusers: [ { values: ‘68‘ }, { values: ‘69‘ }, { values: ‘70‘ }, { values: ‘71‘ },{ values: ‘72‘ },{ values: ‘73‘ } ], }, { values: ‘考勤6‘, fusers:[ { values: ‘74‘ }, { values: ‘75‘ }, { values: ‘76‘ }, { values: ‘77‘ } ] }, { values: ‘薪資6‘, fusers:[ { values: ‘78‘ }, { values: ‘79‘ }, { values: ‘80‘ }, { values: ‘81‘ } ] } ] }
] } } }, created(){ client.post(‘hello‘,{}).then(function (response) { this.datas=response }) .catch(function (error) { console.log(error) }) }, computed:{
}, methods:{ subData:function(){ client.post(‘hello‘,{ ID: this.roleName, checkName:this.checkedNames, des:this.descrption }).then(function (response) { }) .catch(function (error) { console.log(error) }) } } }) var demo=new Vue({ el: ‘#demo‘ }) <?php $this->endBlock() ?> <?php $this->registerJs($this->blocks[‘js‘], \yii\web\View::POS_END); ?> </script>

vue初級頁面 tab切換 表格動態綁定 v-for(item,index) in datas.system :value='item.values'