<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}
table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-user-select: none;
}
td {
background-color: #f9f9f9;
}
th, td {
min-width: 120px;
padding: 10px 20px;
}
th.active {
color: #fff;
}
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
#search {
margin-bottom: 10px;
}
</style>
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(index,entry) in data" track-by="temp">
<td >
{{entry.name}}
</td>
<td >
{{entry.power}}
</td>
<td >
----------------------- {{entry.item1}}---------------
</td>
<td >
{{entry.item2}}
</td>
<td >
<demo-select :data="entry.list" :list="entry" :name="‘cate1‘" :dir="index" :value="entry.item1"></demo-select>
</td>
</tr>
</tbody>
</table>
</script>
<script type="text/x-template" id="select-template">
<select v-model="selected" value="value">
<option v-for="entry in data |wrap dir list name selected ">{{entry}}</option>
</select>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:data="gridData"
:columns="gridColumns" >
</demo-grid>
</div>
</body>
</html>
<script>
// register the grid component
Vue.component(‘demo-grid‘, {
template: ‘#grid-template‘,
props: {
data: Array,
columns: Array
}
})
Vue.component(‘demo-select‘, {
template: ‘#select-template‘,
props: {
data: Array,
list: Object,
name:‘‘,
dir:‘‘,
value:‘‘
}
})
// bootstrap the demo
var demo = new Vue({
el: ‘#demo‘,
data: {
searchQuery: ‘‘,
gridColumns: [‘name‘, ‘power‘,‘item1‘,‘item2‘,‘list‘],
gridData: [
{ name: ‘Chuck Norris‘,temp:1, power: Infinity,item1:"1",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}]},
{ name: ‘Bruce Lee‘,temp:2, power: 9000 ,item1:"",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}]},
{ name: ‘Jackie Chan‘, temp:3,power: 7000,item1:"",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}] },
{ name: ‘Jet Li‘,temp:4,power: 8000,item1:"",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}] }
]
}
})
Vue.filter("wrap",function(value,dir,entry,type,selected){
console.info(demo.gridData[dir].item1);
console.info(demo.gridData[dir].item1==selected);
if(demo.gridData[dir].item1==selected)
{
return value;
}
demo.gridData.$remove(entry);
entry.item1=3;
demo.gridData.push(entry);
return value;
})
</script>