表格行内编辑增删改查以及拖拽式分割面板组件封装 5.54KB

xiuxialala

资源文件列表:

rowEdit.zip 大约有6个文件

rowEdit/components/
rowEdit/components/kyy-split-pane/
rowEdit/components/kyy-split-pane/drag.svg 794B
rowEdit/components/kyy-split-pane/index.vue 2.53KB
rowEdit/index.vue 12.92KB
rowEdit/

资源介绍:

表格行内编辑增删改查以及拖拽式分割面板组件封装

<template> <div class="tree_table"> <KyySplitPane> <template v-slot:left> <div class="splitpane_left"> <div class="hosp-tree"> <div class="hosp-tree-title flex_between"> <div>流程节点</div> </div> <div class="hosp-tree-content"> <div class="tree_main_content"> <el-tree :expand-on-click-node="false" :indent="24" default-expand-all class="filter-tree" :data="treeData" :node-key="nodeKey" :props="defaultProps" ref="tree" @node-click="handleNodeClick" :current-node-key="currentNodekey" :highlight-current="true" v-loading="treeLoading"> <div class="hosp-tree-node" slot-scope="{ node }"> <span :title="node.label">{{ node.label }}</span> </div> </el-tree> </div> </div> </div> </div> </template> <template v-slot:right> <div class="splitpane_right"> <div class="single-table-container"> <div class="search-form-wrapper"> <div class="title">转换配置</div> <div class="seach_list"> <el-button type="primary" size="mini" @click="addConfig">添加</el-button> </div> </div> <div class="single-table"> <el-table ref="table" v-loading="tableLoading" size="mini" height="100%" :data="tableData" stripe tooltip-effect="dark" :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold', color: '#303133' }" :highlight-current-row="true" border> <el-table-column type="index" header-align="center" align="center" label="序号" width="50"></el-table-column> <el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip> <template slot-scope="scope"> <el-input v-if="scope.row.isEdit" class="config-text" v-model="curEdit.fieldName" placeholder="请输入" size="mini" clearable></el-input> <span class="config-text-span" v-else> {{ scope.row.fieldName }} </span> </template> </el-table-column> <el-table-column prop="mappingRefType" label="映射关系类型" show-overflow-tooltip> <template slot-scope="scope"> <span class="config-text-span" v-if="scope.row.isEdit">{{ !!curEdit.mappingRefType ? fieldFomatter(curEdit.mappingRefType, mappingRefTypeOptionsObj) : '-' }}</span> <span class="config-text-span" v-else>{{ !!scope.row.mappingRefType ? fieldFomatter(scope.row.mappingRefType, mappingRefTypeOptionsObj) : '-' }}</span> </template> </el-table-column> <el-table-column width="220" prop="mappingRefName" label="映射关系名称"> <template slot-scope="scope"> <el-select v-if="scope.row.isEdit" value-key="mappingCatalogId" v-model='curEdit.mappingRefName' placeholder='请选择' filterable clearable @change="(val) => change(val, curEdit)"> <el-option v-for="item in selectTreeData" :value='item' :key="item.mappingCatalogId" :label='item.mappingCatalogName'></el-option> </el-select> <span class="config-text-span" v-if="!scope.row.isEdit"> {{ scope.row.mappingRefName }} </span> </template> </el-table-column> <el-table-column width="220" prop="filedConfig" label="字段配置" show-overflow-tooltip> <template slot-scope="scope"> <el-input class="config-text" v-if="scope.row.isEdit" v-model="curEdit.filedConfig" placeholder="请输入" size="mini" clearable></el-input> <span class="config-text-span" v-else> {{ scope.row.filedConfig }} </span> </template> </el-table-column> <el-table-column label="操作" show-overflow-tooltip> <template slot-scope="scope"> <el-button type="text" @click="modifyConfig(scope.row, scope.$index, false)">{{scope.row.isEdit ? "保存" : "修改"}}</el-button> <el-button v-if="!scope.row.isEdit" class="btn2" type="text" @click="deleteConfig(scope.row)">删除</el-button> <el-button v-else type="text" @click="modifyConfig(scope.row, scope.$index, true)"> 取消</el-button> </template> </el-table-column> </el-table> </div> <div class="table-pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pages.pageIndex" :page-sizes="pages.pageSizeList" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total"></el-pagination> </div> </div> </div> </template> </KyySplitPane> </div> </template> <script> // definePageMeta({ // title: '数据转换配置', // keepalive: true // }) // import { // getDataTransferConfigTree, // getMappingCatalogList, // deleteMappingRef, // getPageTransformInfo, // saveOrUpdate // } from '#runtime/plugins/preset-hosp-chs-core-front/api/dataTransferConfig' // import { guid } from '@/utils/index' import KyySplitPane from "./components/kyy-split-pane/index.vue"; export default { name: 'chs-base-data-transfer-config', components: { KyySplitPane }, data() { return { treeLoading: false, currentNodekey: null, nodeKey: 'id', defaultProps: { children: 'child', label: 'className' }, treeData: [], selectLoading: false, selectTreeData: [], tableLoading: false, tableData: [], mappingRefTypeOptionsObj: { 1: '业务代码转卫健标准', 2: '卫健标准转医保标准', 3: '业务代码转医保标准' }, curEdit: null, pages: { pageIndex: 1, pageSize: 20, pageSizeList: [10, 20, 30, 50, 100], total: 0 }, } }, created() { // this.initTree() // this.getMappingCatalogList() }, methods: { // 初始化树 initTree() { this.treeLoading = true setTimeout(() => { this.treeLoading = false }, 5000) // getDataTransferConfigTree().then((res) => { // if (res.code == 200) { // this.treeData = res.result // if (this.treeData.length > 0) { // this.$nextTick(() => { // this.currentNodekey = this.treeData[0].id // this.$refs.tree.setCurrentKey(this.currentNodekey) // this.initTable() // }) // } // this.treeLoading = false // } else { // this.treeData = [] // this.tableData = [] // } // }) }, //切换树节点 handleNodeClick(data, node) { this.$nextTick(() => { this.currentNodekey = data.id this.$refs.tree.setCurrentKey(this.currentNodekey) this.initTable() }) }, // 表格数据 initTable() { this.tableLoading = true setTimeout(() => { this.tableLoading = false }, 5000) let params = { classId: this.currentNodekey, current: this.pages.pageIndex, size: this.pages.pageSize

标题	大小	时间
GB/T 28181-2022 公共安全视频监控联网系统：信息传输、交换、控制技术要求pdf协议文档，GB/T 28181-20	35MB	8月前

学生信息管理系统源码+论文+开题报告+任务书	20.01MB	8月前
微软雅黑字体包(包含完整版和精简版)	34.25MB	8月前
缘空官网源码(后台版)v1.0.zip	4.9MB	8月前
2024年全国省市区县街道SQL数据脚本	11.52MB	8月前

mongodb-linux-x86-64-rhel70-4.0.9.tgz	99.72MB	8月前
code-verification.zip	3.44KB	8月前
JAVA基于J2ME的手机游戏开发(论文+源代码).zip	161.54KB	8月前