vue+element-ui table表格的使用 编辑、删除以及分页

效果图

  data() {
    return {
     // 选中表格index
      activeIndex: undefined,
      groupList: [],
      loading:false,
       //分页参数 一页有n条 当前页  总数
      page: {
        limit: undefined,
        p: undefined,
        total: undefined
      }
    };
  },

  methods：{
    //获取表格
    getGroup(params) {
      this.loading = true;
      getGroupTable(params)
        .then(response => {
          this.groupList = response.data;
           this.page = {
            total: response.count,
            limit: response.limit,
            p: response.p
          };
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //分页
  pageChange(val) {
      this.queryParams.p = val;
      this.getGroup();
    },
       // 编辑
        editGroup(index, groupList) {
      this.activeIndex = index;
      //这样就不会共用同一个对象 避免对话框内容改变的时候遮罩下面跟着改变
      this.editGroupInfo = Object.assign({}, groupList.row);
      this.editGroupDialog = true;
    },

     // 删除
    deleteGroup(index, id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            id: id
          };
          deleteGroup(params, id).then(response => {
            this.groupList.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {});
    },
     //空数据转化为‘-’
   formatMark(row) {
      console.log(row);
      return row.mark ? row.mark : "-";
    },

}