data() {
    return {
      // 分页
      pageState: {
        pageIndex: 1,
        pageSize: 10,
        pageTotal: 0,
        pageSizes: [10, 20, 30]
      }
    };
  }

fetch(){
  const size = this.pageState.pageSize;
  const index = this.pageState.pageIndex - 1; // 后端分页从0开始
  ...具体请求方法(index,size)
  .then(res => this.pageState.pageTotal = res.result.total) // 更新总页数
}

uploading: false, // 上传中
uploadReady: false, // 上传文件就绪

 uploadChange(file, fileList) {
   // 文件列表改变：上传列表中保持只有一个文件
   if (fileList.length > 1) {
     fileList.splice(0, 1);
   }
   if (fileList.length != 0) {
     this.uploadReady = true;
   }
 },
 // 点击开始上传事件
 uploadFile() {
   if (!this.uploadReady) {
     this.$message({ type: "error", message: "请先选择上传文件" });
     return false;
   }
   this.uploading = true;
   this.$refs.uploader.submit();
 },
 // 上传成功回调
 uploadSuccess(res) {
   this.uploading = false;
   if (res.retCode === 0) {
     this.$message({ type: "success", message: "上传成功" });
     this.closeDialog();
     this.fetch();
   } else {
     // 响应失败
     this.resetUpload();
     this.$message({ type: "error", message: "上传失败" });
   }
 },
 // 请求发出失败
 uploadError() {
   this.uploading = false;
   this.resetUpload();
   this.$message({ type: "error", message: "上传失败" });
 },
 // 重置上传文件列表
 resetUpload() {
   this.$refs.uploader.clearFiles();
   this.uploadReady = false;
 }

this.dialogTitle = {
  dialog1Title: "弹窗1标题",
  ...
};
// data
dialogName: "",
currentEditRecord: null, // 当前弹窗关联对象
// computed
dialogVisible(){
  return this.dialogName ? true: false;
}

openDialog(name, editRecord) {
  this.dialogName = name;
  editRecord && (this.currentEditRecord = editRecord);
},
closeDialog() {
  // 弹窗关闭前处理
  this.dialogName == "dialog1" && (特定弹窗关闭前处理);
  ...
  this.dialogName = "";
}

// selection-change 返回选中的行数据集合
onSelectionChange(list){
    console.log(list);
};
// toggleRowSelection 手动选中/取消选中某行,row必须为行对象
this.toggleRowSelection(row, true);

// 自定义排序：空值置底
const onSortChange = function ({ column, prop, order }) {
  const bottomValue =
    order === 'ascending' ? Number.Infinity : Number.NEGATIVE_INFINITY;
  tableData.value.sort((a, b) => {
    const valueA = a === null ? bottomValue : a[prop];
    const valueB = b === null ? bottomValue : b[prop];
    if (order === 'ascending') {
      return valueA - valueB;
    } else {
      return valueB - valueA;
    }
  });
};

// 非空时计算行数，空数组则默认按空数据显示表格
if (this.tableList.length > 0) {
  let num = Math.ceil(this.tableList.length / 3); // 3列复用
  this.lineLength = new Array(num).fill("");
}

// 手动校验所有配置
async validMultiForm() {
  let isValid = false;
  isValid = await this.$refs.applyForm.validate().catch(() => {
    this.$message.error("applyForm错误");
    this.activeSetting = "applySetting";
    return false;
  });
  if (!isValid) return;
  isValid = await this.$refs.pageForm.validate().catch(() => {
    this.$message.error("pageForm错误");
    this.activeSetting = "pageSetting";
    return false;
  });
  return isValid;
},

// 标记是否为提交触发
let isSubmitTrigger = false;
// 校验规则
const rules = {
  username: { pattern: /^[A-Za-z0-9]+$/, min: 6, message: '账号由字母与数字组成' },
  password: {
    validator,
    required: true,
    validate: validateEmpty,
    message: '请输入密码'
  },
};

// Login Handle
this.logging = true;
isSubmitTrigger = true;
this.$refs.form.validate().then(() => { ... });
isSubmitTrigger = false;

// validator统一处理
function validator(rule, value, callback) {
  if (!isSubmitTrigger) return; // 仅提交表单时验证
  // 空值校验
  if (rule.required && value === '') return callback(new Error(' '));
  // 对表单项自身进行validate校验
  if (rule.validate) {
    try {
      rule.validate(value);
    } catch (error) {
      return callback(new Error(rule.message));
    }
  }
  // 提交时的多字段联合校验，如校验两次密码是否输入一致
  ...multiple field validate logic
  callback();
}

computed: {
  isIndeterminate(){
    const count = this.selectList.length;
    const total = this.itemsList.length;
    return count && count < total;
  },
  selectAll(){
    const count = this.selectList.length;
    const total = this.itemsList.length;
    return count === total;
  }
},
methods: {
  // 全选/取消全选
  handleSelectAll() {
    if(this.selectAll){
      this.selectIdList = [];
    } else {
      this.selectIdList = [...this.itemsList];
    }
  }
}

// element.js
...
Vue.prototype.$message = $message;

// $message
// this.$message方式调用
function $message(options) {
  if (typeof options == "string") options = { message: options };
  options.duration = options.duration || 1600;
  Message(options);
}
// this.$message.type方式调用(关闭其它Message提示)
["success", "error", "warning", "info"].forEach(type => {
  $message[type] = function(msgStr) {
    Message.closeAll();
    var options = typeof msgStr == "string" ? { message: msgStr } : msgStr;
    options.type = type;
    options.duration = options.duration || 1600;
    Message(options);
  };
});

// element.js
...
Vue.prototype.$loading = $loading;

// $loading
function $loading(handle, options) {
  if (typeof options == "string") options = { text: options };
  options = { ...options, background: "rgba(0, 0, 0, 0.7)" };
  let loadingInstance = Loading.service(options);
  handle = handle instanceof Function ? handle() : handle;
  return handle.finally(() => {
    loadingInstance.close();
  });
}

// 使用
this.$loading(this.fetch,"数据加载中...");

const loading = ref(false);
const page = ref({ index: 0, total: 0, size: 10 }); // 分页状态
const isEnd = computed(() => {
  const { index, size, total } = page.value;
  return index * size > total;
});
const loadData= (pageIndex) => {
  loading.value = true;
  page.value.index =
    typeof pageIndex === 'number' ? pageIndex : page.value.index + 1;
  const { data } = await http.fetch({index: page.value.index});
  if (pageIndex === 1) {
    list.value = data;
  } else {
    list.value.push(...data);
  }
  page.value.total = ...;
}

const handleScrollEnd = () => {
  emitter.emit("UserProfilePageScrollEnd");
};

const onScrollEnd = () => {
  if (isEnd.value || loading.value) return;
  getEventListWithPageIndex(pager.value.pageIndex + 1);
};
onMounted(() => {
  emitter.on("UserProfilePageScrollEnd", onScrollEnd);
});
onUnmounted(() => {
  emitter.off("UserProfilePageScrollEnd", onScrollEnd);
});

const showImageViewer = ref(false);
const currentPreviewIndex = ref();
const imageUrlList = computed(() => {
  return assetsList.value.map((item) => transformImageURL(item.path));
});
const handlePreviewImage = (index) => {
  currentPreviewIndex.value = index;
  showImageViewer.value = true;
};