• 4
  • 新人请关照

如何使用原生table或者el-table动态绑定双列的数据

javascript
姓名 XXX 年龄 22
名族 汉 联系方式 136.....

这种横向的双列的数据展示，大佬们给个思路或者方法

阅读 335
评论
    2 个回答
    • 152

    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>

    这样？

    评论 赞赏
      • 8.5k

      你的目的是表内容像表头这样2行2行的各显示不同内容😓？
      你觉得这种设计合理吗？确定不会被人打？
      一行展示不了考虑下用expand。
      在一行里面上下显示2种不同内容倒是可以接受，可以通过默认插槽来实现。

      评论 赞赏
        撰写回答

        登录后参与交流、获取后续更新提醒