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

表格铺满-slot用法

图例

格式

//添加列表按钮

    添加培训自查



//表格
//  max-height="10000000000"  用于无分页

        
    //用于移除时，序号
        
            
          
        

        
          

          
        

        
          
        
        
        
          

          
        
        
            //slot插槽用法
          
        
      

注：

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