2 个回答
已采纳
el-table 应该是 vue的一个ui框架elementUi的一个组件；
elementUi 跟动态绑定没关系，完成这个的是vue；
补上一个简易的双向绑定模块
<body>
<table id="eg-table">
<tbody>
<tr>
<th>[[data.name.name]]</th>
<td>[[data.name.value]]</td>
<th>[[data.age.name]]</th>
<td>[[data.age.value]]</td>
</tr>
<tr>
<th>[[data.race.name]]</th>
<td>[[data.race.value]]</td>
<th>[[data.phone.name]]</th>
<td>[[data.phone.value]]</td>
</tr>
</tbody>
</table>
</body>
<script>
class BindObj{
constructor(el, data){
if(typeof el == 'string'){
el = document.querySelector(el)
}
if( !(el instanceof Node)){
throw new Error('Not Found!', el)
}
let domList = Array.from(el.querySelectorAll('*'));
domList.map((item,index)=>{
let itemHtml = item.innerHTML;
if(!(/.*<.*>/g.test(itemHtml))){
let inner = /.*\[\[\s*(\S*)\s*\]\].*/g.exec(itemHtml)
if(inner && inner[1]){
let tag = inner[1].split('.'),
tagKey = tag.pop();
tag = tag.reduce((p,i)=>p[i], data)
item.innerHTML = tag[tagKey]
this.onchange( tag, tagKey, (e)=>{
item.innerHTML = e
})
}
}
item.innerHtml
})
}
onchange(objTag, objKey, callBack){
if(!(objTag instanceof Object)){
console.warn(objTag, 'its not a Object')
}
let value = objTag[objKey];
Object.defineProperty(objTag, objKey, {
set(event){
value = event
callBack(event)
return
},
get(){
return value
}
})
}
}
let data = {
race: {
value: "汉",
name: "民族"
},
age: {
value: 8,
name: "年龄"
},
name: {
value: "kuuk",
name: "姓名"
},
phone: {
value: 19999999999,
name: "联系方式"
}
}
let binder = new BindObj('#eg-table', {data})
</script>这样？
