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