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

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

souya 4
12月4日提问
2 个回答
0

已采纳

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>

这样?

0

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

撰写答案

推广链接