How do elementUI tables achieve this layout?

1, background management system, how to use elementUI to achieve this effect with tables

2

Aug.05,2021

tables are usually in one row. How to implement the layout of two rows and a group


the document is written so clearly, read more.
http://element-cn.eleme.io/2.

clipboard.png

clipboard.png

clipboard.png


instead of using the table component of elementUI, write

directly with the table tag of html.
    <table>
      <tbody>
        <tr>
          <th>+</th>
          <th><i>*</i></th>
          <th><i>*</i></th>
          <th><i>*</i></th>
          <th><i>*</i></th>
          <th><i>*</i></th>
        </tr>
        <template v-for="item in list">
          <tr>
            <td rowspan="2">x</td>
            <td><el-input></el-input></td>
            <td><el-input></el-input></td>
            <td><el-date-picker
              type="date"
              placeholder="">
            </el-date-picker></td>
            <td><el-input></el-input></td>
            <td><el-input></el-input></td>
          </tr>
          <tr>
            <td></td>
            <td colspan="4">
              <el-upload>
                <el-button size="small" type="primary"></el-button>
              </el-upload>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
Menu