vue 自定义el-table穿梭框功能

news/2024/11/15 0:49:36/

一、需求描述:前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能,弹框的左边是全部数据展示,点击表格行数据可以选中自动增加到右边的已选框,并且可以手动删除、重置选中数据。点击确定后到展示到主页面,被选中的数据打开弹框不能再次选择。

二、界面展示:功能如下图所示:

  • 主页面没有选中的数据时,展示如下:

  •  弹框页面,展示如下:

  •  选中后主页面的数据显示如下:

  •  再次点击添加学生成绩按钮,之前选中数据不可再点击,如下图:

 三、代码实现:

  1. 首页面表格主键是orderId ,主页面代码:
    <div class="content-box"><div class="table-title flex-between"><span>学生成绩信息</span> <div style="text-align:end"><el-button plain type="primary" @click="delSomeMedic()">批量删除</el-button><el-button type="primary" @click="addMedic()">添加学生成绩</el-button></div></div><div class="single-table"><el-table ref="table" size="mini" height="100%" :data="tableData.adrDrugInfos" :header-cell-style="{background: '#fff',height:'40px'}" border@selection-change="handleSelectionChange"><el-table-column type="selection" width="40"> </el-table-column><el-table-column prop="dose" label="姓名" show-overflow-tooltip></el-table-column><el-table-column prop="suspectedConcomitant" label="是否住校" show-overflow-tooltip width="100"><template #default="scope"><span v-if="scope.row.suspectedConcomitant == '1'">住校生</span><span v-if="scope.row.suspectedConcomitant == '2'">非住校生</span></template></el-table-column><el-table-column prop="doseUnit" label="数学" show-overflow-tooltip></el-table-column><el-table-column prop="frequency" label="语文" show-overflow-tooltip></el-table-column><el-table-column prop="routeName" label="英语" show-overflow-tooltip></el-table-column><el-table-column prop="reasonForUse" label="备注" show-overflow-tooltip></el-table-column><el-table-column label="操作" header-align="center" width="200" align="center" fixed="right"><template slot-scope="scope"><el-button size="small" style="color: #409eff; padding: 0" type="text" @click="editMedic(false,scope.row)">成绩详情</el-button><el-button size="small" style="color: #409eff; padding: 0" type="text" @click="editMedic(true,scope.row)">编辑</el-button><el-button size="small" style="color: #409eff; padding: 0" type="text" @click="delMedic(scope.row)">删除</el-button></template></el-table-column></el-table></div>
    </div>//-----------------------------------------------------------------------------
    // 新增学生成绩信息addMedic() {if (this.tableData.healthEventId == '') {return this.$message.warning('请先选择学生')} else {this.$refs.addMedicDialog.open(this.tableData.adrDrugInfos,this.tableData.healthEventId,this.tableData.visitType)}},// 删除学生成绩信息delMedic(row) {this.$Confirm({ type: 'delete' }).then((e) => {this.tableData.adrDrugInfos.map((item, index) => {if (item.orderId == row.orderId) {this.tableData.adrDrugInfos.splice(index, 1)this.$message.success('删除成功!')}})}).catch((err) => {console.log(err)})},
    //选中学生成绩信息数据handleSelectionChange(val) {this.selectedMedicData = val},
    // 批量学生成绩信息delSomeMedic() {if (this.selectedMedicData.length <= 0) {return this.$message.warning('请先选择学生成绩信息')}this.$Confirm({ type: 'delete' }).then((e) => {this.selectedMedicData.forEach((val) => {this.tableData.adrDrugInfos.forEach((v, i) => {if (val.orderId == v.orderId) {this.tableData.adrDrugInfos.splice(i, 1)this.$message.success('删除成功!')}})})}).catch((err) => {console.log(err)})},
    // 选择学生成绩信息回显getMedicalData(data) {data.forEach((item) => {this.tableData.adrDrugInfos.push({orderId: item.orderId||'',suspectedConcomitant: item.suspectedConcomitant||'',dose: item.onceDosage||'',doseUnit: item.dosageunitName||'',frequency: item.freqDesc||'',routeName: item.defaultUsageCode||'',formName: item.drugForm||'',reasonForUse: item.reasonForUse||'',})})},
  2. 弹框页面数据主键是orderId,弹框页面代码:
    <template><el-dialogtitle="添加学生成绩":visible.sync="dialogVisible":close-on-click-modal="false"@close="close"append-to-bodytop="10vh !important"width="90%"><div class="box-wrapper"><div class="single-table-container left-table"><div class="search-form-wrapper"><div class="title">学生成绩列表</div><div class="seach_list"><el-inputprefix-icon="el-icon-search"placeholder="学生姓名"v-model="searchForm.onceDosage"size="mini"clearable></el-input><el-date-pickerv-model="dateTime"type="daterange"value-format="yyyy-MM-dd"format="yyyy-MM-dd"range-separator="—"@change="changeDateTime"start-placeholder="在校开始时间"end-placeholder="在校结束时间"></el-date-picker><el-button type="primary" size="mini" @click="searchTable">查询</el-button></div></div><div class="single-table"><el-tableref="leftTable"v-loading="tableLoading"size="mini"height="370px":data="tableData"striperow-key="orderId"tooltip-effect="dark":header-cell-style="{background: '#f5f7fa',fontWeight: 'bold',color: '#303133'}"border@selection-change="handleSelectionChange"@row-click="handleClickTableRow"><el-table-columntype="selection"width="40":reserve-selection="true":selectable="handleSelected"></el-table-column><el-table-columntype="index"header-align="center"align="center"label="序号"width="50"></el-table-column><el-table-columnprop="onceDosage"label="姓名"show-overflow-tooltipwidth="120":formatter="formartTableField"></el-table-column><el-table-columnprop="startDateTime"label="在校开始时间"show-overflow-tooltipwidth="100":formatter="formartTableField"></el-table-column><el-table-columnprop="stopDateTime"label="在校结束时间"show-overflow-tooltipwidth="100":formatter="formartTableField"></el-table-column><el-table-columnprop="dosageunitName"label="数学"show-overflow-tooltip:formatter="formartTableField"></el-table-column><el-table-columnprop="freqDesc"label="语文"show-overflow-tooltip:formatter="formartTableField"></el-table-column><el-table-columnprop="defaultUsageCode"label="英语"show-overflow-tooltip:formatter="formartTableField"></el-table-column></el-table></div><div class="table-pagination"><el-paginationclass="pagination"@current-change="handleCurrentChange":current-page="pages.pageIndex":page-size="pages.pageSize"layout="total,prev, pager, next":total="pages.total"></el-pagination></div></div><div class="single-table-container right-table"><div class="search-form-wrapper"><div class="title">已选学生</div></div><div class="single-table"><el-form:model="selectedForm"ref="selectedForm":rules="selectedForm.rules"><el-tableref="rightTable"size="mini"height="410px":data="selectedForm.selectedData"stripetooltip-effect="dark":header-cell-style="{background: '#f5f7fa',fontWeight: 'bold',color: '#303133'}"border><el-table-columntype="index"header-align="center"align="center"label="序号"width="50"></el-table-column><el-table-columnprop="onceDosage"label="姓名"width="120"show-overflow-tooltip></el-table-column><el-table-columnlabel="住校生/非住校生"show-overflow-tooltipwidth="188"><template #default="scope"><el-form-item:prop="'selectedData.' + scope.$index + '.suspectedConcomitant'"><el-radio-groupv-model="scope.row.suspectedConcomitant"size="mini"><el-radio label="1">住校生</el-radio><el-radio label="2">非住校生</el-radio></el-radio-group></el-form-item></template></el-table-column><el-table-column label="选择原因" show-overflow-tooltip><template #default="scope"><el-form-item:prop="'selectedData.' + scope.$index + '.reasonForUse'":rules="selectedForm.rules.reasonForUse"><el-inputplaceholder="请输入"v-model="scope.row.reasonForUse"clearable></el-input></el-form-item></template></el-table-column><el-table-columnlabel="操作"header-align="center"align="center"width="80"><template slot-scope="scope"><el-buttonsize="small"style="color: #409eff; padding: 0"type="text"@click="del(scope.row)">删除</el-button></template></el-table-column></el-table></el-form></div></div></div><span slot="footer" class="dialog-footer"><el-button @click="reset">重置</el-button><el-button :loading="btn_loading" type="primary" @click="submit">确认</el-button></span></el-dialog>
    </template>
    <script>
    import { getAdviceRec } from '@/api/adr/report-manage-service'export default {components: {},data() {return {dialogVisible: false,tableLoading: false,btn_loading: false,healthEventId: '',visitType: '',searchForm: {onceDosage: '',startDateTime: '',stopDateTime: ''},dateTime: [],selectedForm: {selectedData: [],rules: {reasonForUse: [{ required: true, message: '请输入选中学生的原因', trigger: 'blur' }]}},pages: {pageIndex: 1,pageSize: 10,total: 0},tableData: [{orderId: 1,onceDosage: '张三',startDateTime: '2020-01-01',stopDateTime: '2023-01-01',dosageunitName: '98',freqDesc: '95',defaultUsageCode: '99'},{orderId: 2,onceDosage: '李四',startDateTime: '2020-01-01',stopDateTime: '2023-05-01',dosageunitName: '100',freqDesc: '92',defaultUsageCode: '95'},{orderId: 3,onceDosage: '王五',startDateTime: '2021-01-01',stopDateTime: '2023-02-01',dosageunitName: '98',freqDesc: '95',defaultUsageCode: '100'},{orderId: 4,onceDosage: '赵六',startDateTime: '2021-06-01',stopDateTime: '2024-01-01',dosageunitName: '98',freqDesc: '100',defaultUsageCode: '90'}],pSelectedData: [] // 父级数据}},methods: {open(data, healthEventId, visitType) {this.healthEventId = healthEventId || ''this.visitType = visitType || ''this.dialogVisible = trueif (!!data && data.length > 0) {this.pSelectedData = data} else {this.pSelectedData = []}this.initTable()},initTable() {this.tableLoading = truelet params = {current: this.pages.pageIndex,size: this.pages.pageSize,visitType: this.visitType,healthEventId: this.healthEventId,startDateTime: this.searchForm.startDateTime,stopDateTime: this.searchForm.stopDateTime,onceDosage: this.searchForm.onceDosage}params = useKyyDelNullProperty(params)getAdviceRec(params).then((res) => {if (res.code == 200) {this.tableLoading = falsethis.tableData = res.result.recordsthis.pages.total = res.result.total// 默认在校this.tableData.forEach((item) => {this.$set(item, 'suspectedConcomitant', '1')})// 固定对齐表格this.$nextTick(() => {this.$refs.leftTable.doLayout()})} else {this.$message.error(`错误:${res.message}`)}}).catch((err) => {})setTimeout(() => {this.tableLoading = false}, 5000)},handleSelectionChange(val) {this.selectedForm.selectedData = val},close() {this.dialogVisible = falsethis.searchForm.onceDosage = ''this.searchForm.startDateTime = ''this.searchForm.stopDateTime = ''this.reset()},reset() {this.btn_loading = falsethis.$refs.leftTable.clearSelection()},// 删除del(row) {// 取消选中this.selectedForm.selectedData.map((item, index) => {if (item.orderId == row.orderId) {this.selectedForm.selectedData.splice(index, 1)this.$refs.leftTable.toggleRowSelection(row, false)}})},// 点击行勾选数据handleClickTableRow(row, event, column) {if (!this.handleSelected(row)) return falseif (this.selectedForm.selectedData.length > 0) {// 如果结果数组不为空,判断所选的这条是否在结果数组里if (JSON.stringify(this.selectedForm.selectedData).indexOf(JSON.stringify(row.orderId)) == -1) {this.selectedForm.selectedData.push(row)this.$refs.leftTable.toggleRowSelection(row, true)} else {// 取消选中this.selectedForm.selectedData.map((item, index) => {if (item.orderId == row.orderId) {this.selectedForm.selectedData.splice(index, 1)this.$refs.leftTable.toggleRowSelection(row, false)}})}} else {this.selectedForm.selectedData.push(row)this.$refs.leftTable.toggleRowSelection(row, true)}},// 已选数据不可再选,通过比较orderId 是否一致handleSelected(row, index) {if (this.pSelectedData?.length > 0) {if (this.pSelectedData.some((el) => {return el.orderId == row.orderId})) {return false} else {return true}} else {return true}},submit() {this.btn_loading = trueif (this.selectedForm.selectedData.length > 0) {this.$refs.selectedForm.validate(async (valid) => {if (valid) {this.$emit('getMedicalData', this.selectedForm.selectedData)this.close()this.$message.success('操作成功')} else {return this.$message.warning('请输入选择原因')}})} else {this.$message.warning('请选择要添加的学生成绩信息')}this.btn_loading = false},// 分页栏handleCurrentChange(val) {this.pages.pageIndex = valthis.initTable()},formartTableField(row, column, cellValue, index) {if (cellValue) {return cellValue}return '-'},changeDateTime(data) {if (data) {this.searchForm.startDateTime = data[0]this.searchForm.stopDateTime = data[1]} else {this.searchForm.startDateTime = ''this.searchForm.stopDateTime = ''}},// 查询searchTable() {if (!!this.dateTime && this.dateTime.length > 0) {this.searchForm.startDateTime = this.dateTime[0]this.searchForm.stopDateTime = this.dateTime[1]}this.pages.pageIndex = 1this.initTable()}}
    }
    </script>
    <style lang="scss" scoped>
    .box-wrapper {font-size: 14px;display: flex;justify-content: space-between;.left-table {width: 51%;padding: 0;}.right-table {width: 48%;padding: 0;.el-input {width: 100%;}.el-form-item {margin: 0;}.el-radio-group {:deep(.el-radio) {margin-right: 10px;.el-radio__label {font-size: 12px;padding-left: 10px;}}}}
    }
    </style>
    


http://www.ppmy.cn/news/225544.html

相关文章

控制算法工程师的工作职责(合集)

控制算法工程师的工作职责1 职责&#xff1a; 1、准确地控制密闭容器的气体或液体的压力&#xff0c;以供校准其他压力表使用; 2、准确地控制温度场的精度&#xff0c;以供校准其他温度计使用; 3、根据不同的控制方案和执行机构/加热制冷方式;测试其特性、建立数学模型、设计算…

Nginx踩坑记录(二) nginx: [warn] invalid value “TLSv1.3“ in /etc/nginx/nginx.conf:20

问题详情 &#xff08;通过指定配置文件的方式&#xff09;启动nginx&#xff0c;提示告警&#xff0c;nginx启动失败。 rootvultr:~# nginx -c /etc/nginx/conf/nginx.conf nginx: [warn] invalid value "TLSv1.3" in /etc/nginx/conf/conf.d/v2ray.conf:20问题原…

css中设置小方块

css中设置小方块 对于小方块的设定&#xff1a;是设置宽高 背景色 的 然后循环 还有圆形是border-radius:50% 这个是样式代码

求一个3*3整型矩阵对角线元素的和

C语言学习记录之------求一个3*3整型矩阵对角线元素的和 int main() {int arr[3][3], total 0;// 输入矩阵元素for (int i 0;i < 3;i) {for (int j 0;j < 3;j) {scanf("%d", &arr[i][j]);}printf("\n");}// 计算求和for (int i 0;i < 3;…

如何查看小方侦测云存储_小方智能摄像机和手机怎样连接?

展开全部 1、在手机上下载米家App。下载安装后保持手机连接wifi&#xff0c;且32313133353236313431303231363533e4b893e5b19e31333366303232wifi信号良好。 2、取出小方智能摄像机&#xff0c;将电源线插入背部电源接口&#xff0c;电源接口为micro-usb接口&#xff0c;等待15…

唐老师讲运算放大器(第三讲)——运放相关参数及选型指南

九、 输入电压范围 轨到轨&#xff1a;意思是输出或者输入电压的范围和供电范围的临界程度&#xff0c;若很接近&#xff0c;则轨到轨&#xff0c;否则不是轨到轨(例如十中的LM324)&#xff0c;又分为输入轨到轨(输入电压范围很接近电源电压范围)和输出轨到轨(输出电压范围很接…

MB10M-ASEMI插件小方桥MB10M

编辑&#xff1a;ll MB10M-ASEMI插件小方桥MB10M 型号&#xff1a;MB10M 品牌&#xff1a;ASEMI 封装&#xff1a;MBM-4 特性&#xff1a;小方桥、插件桥堆 正向电流&#xff1a;1A 反向耐压&#xff1a;1000V 恢复时间&#xff1a;500ns 引脚数量&#xff1a;4 芯片…