表格铺满-slot用法-增加一行&删除一行

表格铺满-slot用法

图例

格式

//添加列表按钮
<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);
}