账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    怎么才能写复杂的iView的table columns?
    17
    0

    iView的Table的columns 数据的key,怎么才能是对象下面的数据呢?

    我的意思是:

    
    
      columns8: [
                {
                    "title": "Name",
                    "key": "name",
                    "fixed": "left",
                    "width": 200
                },
                {
                    "title": "Show",
                    "key": "show",
                    "width": 150,
                    "sortable": true,
                ...

    一般来说这个key是一个字符串,像上面这样.
    传递数据的时候,我们传递table的data,像这样:

    <table :data=data_list>                
    

    data_list 为下面这样:

     [
          {
            name: 'a',
            show: 'hello a',
            ...  
          },
          {
            name: 'b',
            show: 'hello b',
            ...  
          },
          {
            name: 'c',
            show: 'hello c',
            ...  
          }
        ]

    但是,我有一个需求就是:

    如果data_list像这样:

             
     [
          {
            name: 'a',
            obj: { show: 'hello a', }
            ...  
          },
          {
            name: 'b',
            obj: { show: 'hello b', }
            ...  
          },
          {
            name: 'c',
            obj: { show: 'hello c', }
            ...  
          }
        ]

    这样应该怎么写table的 columns呢?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 在iView中,我们可以使用自定义的CSS来定义表头和列,然后使用JS来动态生成表头和列。以下是一个简单的例子:

      1. 首先,你需要在你的CSS文件中定义你的表头样式。例如:

      ``` table { border-collapse: collapse; width: 100%; }

      th, td { border: 1px solid black; padding: 8px; text-align: left; } ```

      1. 然后,你可以使用JS来动态生成表头和列。以下是一个简单的例子:

      ```javascript var table = document.getElementById('myTable'); var tbody = table.getElementsByTagName('tbody')[0]; var header = document.createElement('thead'); var headerRow = document.createElement('tr');

      // 添加表头 header.innerHTML = '姓名'; headerRow.appendChild(header);

      // 添加表头的每一行 for (var i = 0; i < 5; i++) { var headerCell = document.createElement('th'); headerCell.innerHTML = '第' + (i+1) + '名'; headerRow.appendChild(headerCell); }

      tbody.appendChild(headerRow);

      // 使用JS动态生成表头和列 for (var i = 0; i < 5; i++) { var row = document.createElement('tr'); for (var j = 0; j < 5; j++) { var cell = document.createElement('td'); cell.innerHTML = '第' + (i+1) + '名 ' + (j+1) + '号'; row.appendChild(cell); } tbody.appendChild(row); } ```

      在这个例子中,我们首先创建了一个包含5行的表头和5列的表。然后,我们使用JS遍历每一行和每一列,并在相应的单元格中动态添加单元格的内容。

      请注意,这只是一个基本的例子,你可以根据你的需要修改和扩展它。例如,你可以添加更多的样式和事件处理函数,或者使用更复杂的算法来动态生成表头和列。

    更多回答
    扫一扫访问手机版