당신의 불꽃은 당신의 목적이 아닙니다. 마지막 상자는 당신이 라이브로 올 준비가 되었을 때 채워집니다.
반드시 성공적인 삶을 살 필요는 없으며 일상을 즐기는 것이 좋습니다. -------영적 여정
기능 소개:
1. 일괄 삭제 기능 구현
2. 조건에 따라 선택 불가능한 행으로 테이블 설정
목차
1. 기본 객관식 엘테이블
ElementUI는 다중 선택 행 테이블을 제공하고 Ruoyi 프레임워크는 성숙한 다중 선택 테이블도 제공합니다.
1. 테이블 기본 구조
선택-변경 방식 바인딩 필요
<el-table
v-loading="loading"
stripe
:data="productList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" prop="index" width="55">
<template slot-scope="scope">
<span>{
{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="组合编号" align="center">
<template slot-scope="scope">{
{scope.row.isGroup==1?scope.row.group.groupCode:''}}</template>
</el-table-column>
<el-table-column label="组合名称" align="center" prop="productGroupName">
<template slot-scope="scope">{
{scope.row.isGroup==1?scope.row.group.groupName:''}}</template>
</el-table-column>
...
<el-table-column label="产品状态" align="center" prop="prdtStatus" />
</el-table>2. 선택-변경 추가
ids는 select에 의해 선택된 row id를 저장하기 위해 사용되며, single과 mutiple을 사용하여 선택을 기록합니다.
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// ===表格数据===
productList: [],
// 查询产品信息列表
getList() {
this.loading = true;
getProductList(this.queryParams).then(response => {
this.productList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 多选框选中数据
handleSelectionChange(selection) {
console.log("多选框选中数据");
this.ids = selection.map(item => item.id);// 需要根据数据情况调整id名称
this.single = selection.length != 1;
this.multiple = !selection.length;
},2. 일괄 삭제 기능 구현
1. 버튼 관련
다중인 경우에만 다중 선택 모드가 켜져 있고 일괄 삭제 버튼을 사용할 수 있음을 의미합니다.
<el-button
size="small"
@click="handleDelete()"
class="btnItem"
style="margin-left:10px;"
icon="el-icon-delete"
:disabled="multiple"
>删除</el-button>2. 기능 작성 삭제
일괄 삭제와 행 삭제는 삭제 기능을 공유하는데, 전달된 매개변수가 있는지 여부로 구분됩니다. 두 번째 확인을 위해 확인을 사용하십시오. 마지막으로 인터페이스를 조정하여 기능을 구현하십시오.
// 删除
handleDelete() {
this.$confirm("是否确认删除选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(function() {
// return deleteGroup({ groupId: row.id });
})
.then(() => {
this.queryParams.pageNum = 1;
this.getList();
this.msgSuccess("删除成功");
})
.catch(() => {});
},3. 선택할 수 없는 행이 있는 테이블
매우 간단합니다. 테이블의 선택 열에 : selectable="selected" 를 추가하기만 하면 됩니다.
<el-table-column type="selection" width="55" align="center" :selectable="selected" />동시에 방법에 판단 조건을 추가합니다. 이 예에서는 "제품이 결합되었는지 여부"로 판단됩니다.
// 多选框是否可以选中
selected(row, index) {
if (row.isGroup == 1) {
return false; //不可勾选
} else {
return true; //可勾选
}
},