あなたの火花はあなたの目的ではありません.あなたがライブに来る準備ができたときに最後のボックスが埋められます.
必ずしも成功する必要はありません。日常生活を楽しむのは良いことです。-------スピリチュアルな旅
機能紹介:
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 によって選択された行 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. 関数構成を削除する
バッチ削除と行削除は削除機能を共有しており、パラメータが渡されるかどうかによって区別されます。2 回目の確認には、confirm を使用します。そして最後にインターフェースを調整して機能を実現します。
// 删除
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; //可勾选
}
},