如何选网站服务器,东莞市赢网网络科技有限公司,wordpress页面可以收录文章不收录,网站会员管理系统1.需求
某个表单需要选择多条数据#xff0c;点击选择按钮#xff0c;弹框出来一个分页列表#xff0c;选择多条数据#xff0c;外面表单中显示选中的数据#xff0c;可以删除数据#xff0c;再次点击按钮#xff0c;回显当前选中的数据。
2.解决办法
1.el-table加ro…1.需求
某个表单需要选择多条数据点击选择按钮弹框出来一个分页列表选择多条数据外面表单中显示选中的数据可以删除数据再次点击按钮回显当前选中的数据。
2.解决办法
1.el-table加row-key列表数据中的唯一标识
el-table refmultipleTable :datatableData stylewidth: 100% row-keyid selection-changehandleSelectionChangeel-table-column propdate labelDate width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress /
/el-table
2.多选typeselection加reserve-selection属性为ture缓存选中效果
el-table-column :reserve-selectiontrue typeselection width55 /
3.获取选中数据
//多选 选中
const handleSelectionChange (value: any) {selectOptions.value value;console.log(选中数据包含分页, selectOptions.value);
};
4.回显选中建议列表弹框消失时销毁再次进入弹框时在次请求接口成功后回显选中数据。
//默认选中 分页列表接口请求成功后使用
const multipleTable ref(null)
const getSel () {
//selectOptions.value为选中的数据 tableData为列表接口返回的数据 multipleTable为el-table中的refif (selectOptions.value.length 0) {tableData.forEach((item, index) {selectOptions.value.forEach((item1, index1) {if (item.id item1.id) {multipleTable.value.toggleRowSelection(tableData[index], true);}});});}
};
