vue 3.0 实现 el-table分页后依然选中

setup() {
const router = useRouter();
const multipleTable = ref(null);
const state = reactive({
multipleSelection: [],
ids: [],
count: 0,
init: {
page: 1,
num: 9,
},
list: [],
});
onMounted(() => {
init();
});
let init = () => {
queryNews({
data: state.init,
})
.then((res) => {
state.list = res.List;
state.count = res.count;
})
.catch((err) => {
console.log(err);
});
};
let tableRowClassName = ({ row, rowIndex }) => {
if (row.read_flag == 1) {
return “warning-row”;
}
};
let currentChange = (current) => {
state.init.page = current;
init();
};
let markNews = () => {
if (state.multipleSelection.length == 0) {
ElMessage({
showClose: true,
message: “请至少选择一项!”,
type: “warning”,
});
return false;
}
upNews({
data: {
msg_ids: state.multipleSelection,
},
})
.then((res) => {
ElMessage({
showClose: true,
message: “标记成功”,
type: “success”,
});
//消息中心调取成功后清除选中的部分
multipleTable._rawValue.clearSelection();
init();
})
.catch((err) => {
console.log(err);
});
};
// 点击单行事件,进行未读=>已读的操作
let handleRowClick = (row) => {
let arr = [];
arr.push(row.msg_id);
upNews({
data: {
msg_ids: arr,
},
})
.then((res) => {
init();
})
.catch((err) => {
console.log(err);
});
};
let handleSelectionChange = (val) => {
debugger;
let arr = val.map((item) => item.msg_id);
state.multipleSelection = arr;
};

let Formatter = (row) => {
  if (row.create_date) {
    return moment(row.create_date).format("YYYY-MM-DD hh:mm:ss");
  }
};

return {
  ...toRefs(state),
  markNews,
  Formatter,
  init,
  multipleTable,
  currentChange,
  handleRowClick,
  tableRowClassName,
  handleSelectionChange,
};

},
};

你可能感兴趣的:(vue,vue.js,javascript,前端)