• 4
  • 新人请关照

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

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

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

阅读 335
评论
    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>

    这样?

      • 8.5k

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

        撰写回答

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