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;
            }          
          }
        }
      }
    }

elementui制作带有输入框的表格

推荐阅读