图例
格式
//添加列表按钮 <div style="display:inline;float: right;margin-top:15px"> <el-button type="primary" @click="addLine">添加培训自查</el-button> </div> //表格 // max-height="10000000000" 用于无分页 <el-table :data="tableData" style="width: 100%" max-height="10000000000"> <!-- <el-table-column prop="zip" label="序号" width="120"></el-table-column> --> //用于移除时，序号 <el-table-column fixed label="序号" width="50" align="center"> <template scope="scope"> <span>{{scope.$index + 1}}</span> </template> </el-table-column> <el-table-column prop="name" label="培训/自查 "> <template scope="scope"> <el-input size="small" v-model="scope.row.name" placeholder="请输入培训/自查主题"></el-input> </template> <!-- <el-input v-model="inputA" placeholder="请输入培训/自查主题"></el-input> --> </el-table-column> <el-table-column prop="date" label="培训/自查时间"> <template scope="scope"> <el-date-picker v-model="scope.row.data" type="date" placeholder="选择日期"></el-date-picker> </template> </el-table-column> <!-- <el-table-column label="备注"> <template> <el-input v-model="inputA" placeholder="请输入培训/自查主题"></el-input> </template> </el-table-column>--> <el-table-column prop="province" label="请输入培训/自查主题 "> <template scope="scope"> <el-input size="small" v-model="scope.row.province" placeholder="请输入培训/自查主题"></el-input> </template> <!-- <el-input v-model="inputA" placeholder="请输入培训/自查主题"></el-input> --> </el-table-column> <el-table-column fixed="right" label="操作" width="120"> //slot插槽用法 <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small" >移除</el-button> </template> </el-table-column> </el-table>注：
scope.row.province、scope.row.data、scope.row.name，都为表格中对应的列展示要绑定的数据
数据
data() { return { // 1.4表格 tableData: [ { date: "", //培训/自查日期 name: "", //培训自查 province: "", //培训自查主题 city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 1, }, { date: "", name: "", province: "", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 2, }, { date: "", name: "", province: "", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 3, }, { date: "", name: "", province: "", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 4, }, { date: "", name: "", province: "", city: "", address: "上海市普陀区金沙江路 1518 弄", zip: 5, }, { date: "", name: "", province: "", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 6, }, { date: "", name: "", province: "", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 7, }, ], }; }, methods: { //删除行数 deleteRow(index, rows) { rows.splice(index, 1); }, addLine() { //添加行数 var newValue = { date: "", name: "", province: "", zip: "", }; //添加新的行数 this.tableData.push(newValue); this.zip = this.zip + 1; }, },样式
//表头背景颜色 /deep/.el-table th, .el-table tr { background: rgba(244, 245, 247, 1); }