elementui制作帶有輸入框的表格

下面是一張常用的表格：

但是有時候我們需要給表格增加checkbox，輸入框等，效果如下：

代碼：

<el-table border :data="tableData" width="500px">
      <el-table-column type="selection" width="60px" align="center"></el-table-column>
      <el-table-column label="列一">
        <template slot="header" slot-scope="scope">
          <el-input size="mini" v-model="form.attr1" placeholder="請輸入"></el-input>
        </template>
        <el-table-column label="列一">
          <template slot-scope="scope">
            <div>{{ scope.row.attr1 }}</div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input size="mini" v-model="form.attr2" placeholder="請輸入"></el-input>
        </template>
        <el-table-column label="列二">
          <template slot-scope="scope">
            <div>{{ scope.row.attr2 }}</div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input size="mini" v-model="form.attr3" placeholder="請輸入"></el-input>
        </template>
        <el-table-column label="列三">
          <template slot-scope="scope">
            <div>{{ scope.row.attr3 }}</div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

如果想label在上面 輸入框在下面 可以設置一下樣式即可

如果想在全選checkbox后面加‘全選’兩字，也可以設置樣式

參考：

/deep/.el-table__header-wrapper {
      /deep/.el-table__header {
        /deep/.el-table-column--selection {
          /deep/.cell {
            /deep/.el-checkbox:after {
              content: '全選';
              color: #666;
              font-size: 12px;
              font-weight: 800;
            }          
          }
        }
      }
    }