动态增加table表格

View UI链接，属性和方法可以去查询

View UI

<Card class="tableCard">
      <jTableCard :text="'本级企业决策'">
        <div slot="tableBtn">
          <jButton
            :type="'primary'"
            :btnIcon="'el-icon-plus'"
            @click.native="addData()"
            >新增</jButton
          >
          <jButton
            :type="'primary'"
            :btnIcon="'el-icon-delete'"
            :disabled="sameDisabled"
            @click.native="remove()"
            >删除</jButton
          >
        </div>
      </jTableCard>
      <Table
        :columns="columns"
        :data="levelList"
        border
        @on-selection-change="sameSeletTableRow"
        max-height="410"
        :class="{ noDataTable: levelList.length == 0 }"
      >
      /*表格的样式，无数据不显示底部的表格,如果不好使，把height去掉*/
        <template slot-scope="{ row, index }" slot="meetDate">
          <DatePicker
            type="date"
            transfer
            v-model="row.meetDate"
            @on-change="sameDateChange(row, index)"
          ></DatePicker>
        </template>
        <template slot-scope="{ row, index }" slot="meetNam">
          <Input
            v-model="row.meetNam"
            placeholder="输入限制100"
            maxlength="30"
            @on-change="sameMeetNamBlur(row, index)"
          ></Input>
        </template>
      </Table>
    </Card>
<script>
export default {
  name: "XXXX",
  props: {

  },
  data() {
    return {
      levelList: [],
      sameDisabled: true, // 删除按钮置灰
      sameDelDataId: [],
      columns: [
      {
          type: "selection",
          width: 70,
          align: "center",
        },
        {
          title: "序号",
          type: "index",
          width: 70,
          align: "center",
        },
        {
          title: "开会时间",
          slot: "meetDate",
          align: "center",
          width: 180,
        },
        {
          title: "会议名称",
          slot: "meetNam",
          align: "center",
          width: 180,
        }
      ],
    };
  },
  created() {},
  mounted() {
    
  },
  methods: {
    addData() {  
   		 // 添加一组数据
   		this.levelList.push({
            xxxNum: uuid(32, 16), // 唯一性编码
            actionCode: 4, // 动作标识、可以不存在根据业务决定
            meetNam: "",
            meetDate: "",
          });
    },
    sameSeletTableRow (row) {
		// 选择要删除的数据
	  if (row.length !== 0) {
        this.sameDisabled = false;
      } else {
        this.sameDisabled = true;
      }
      this.sameDelDataId = [];
      for (let item of row) {
        this.sameDelDataId.push(item.deciInfoNum); // 添加要删除的集合
      }
	},
    remove() {
	   this.$Modal.confirm({
	   title: "您是否确定删除？",
	   onOk: () => {
	     this.sameDelDataId.forEach((v) => {
	           this.levelList.forEach((e, index) => {
	             if (e.deciInfoNum == v) {
	               this.levelList.splice(index, 1);
	               this.sameDisabled = true;
	             }
	           });
	         });
	     }
	   },
	   });
    },
    // 开会时间选择
    sameDateChange(row, index) {
    this.$set(this.levelList[index], "meetDate", row.meetDate);
    },
    // 会议主题填写
    sameMeetNamBlur(row, index) {
      this.$set(this.levelList[index], "meetNam", row.meetNam);
    },
  },
  components: {},
};
</script>
<style scoped>
/*表格的样式，无数据不显示底部的表格*/
.noDataTable >>> .ivu-table-tip {
  display: none;
}
</style>