devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+elementUI的el-table组件，合并单元格，勾选之后，复制、新增、删除、批量复制、批量删除功能_vue el-table 合并单元格

作者：IT小白 | 2024-08-11 16:46:33

赞

踩

vue el-table 合并单元格
1、需求

        1）、按后台返回的数据进行合并单元格；

        2）、点击新增，表格里面内容新增一行新的数据到最下方，并且序号加一；

        3）、批量删除，勾选复选框点击删除，删除所勾选的数据，并且序号重新排序；

        4）、勾选复选框，点击复制，复制所选的数据到列表最下方，并且序号重新排序；

        5）、表格里面也有新增和删除功能，删除是删除当前行，新增是新增到当前行的下面，并且前面列动态合并，序号也重新排序；

2、效果图

3、功能图片

        1）、新增

 

        2）、删除

 

        3）、复制

 

        4）、table表格里的删除新增

 

4、代码

         1）、HTML结构

        注：N20是我们公司自己封装的组件，但是底层还是elementUI，结构并不是很重要，主要是结构上的:span-method="objectSpanMethod"方法。

  1. <template>
  2.   <div style="position: static !important;" >
  3.     <N20-expandable-pane title="风险场景规则" class="risk_scenario_form_class">
  4.       <template slot="tips">
  5.         <el-button type="primary" size="mini" @click="handleClick('add')">新增</el-button>
  6.         <el-button size="mini" plain @click="handleClick('copy')">复制</el-button>
  7.         <el-button type="danger" size="mini" plain @click="handleClick('delete')">删除</el-button>
  8.       </template>
  9.       <el-form :model="formTableData" ref="formTableData" >
  10.         <N20-table :showSetsize="true"  :data="formTableData.tableData" :columns="columns"  @select="handleTableSelection" @select-all="handleTableSelectionAll" :span-method="objectSpanMethod" border>
  11.           <el-table-column label="指标模型名称" slot="name" align="center" width="248"   :render-header="addRedStar" >
  12.               <template slot-scope="scope">
  13.                 <el-form-item :rules="[ { required: true, message: '', trigger: 'change' } ]" :prop="'tableData.' + scope.$index + '.name'">
  14.                   <N20-input-search class="defind-input-width" v-model="scope.row.name" readonly @click.native="chooseIndicator(scope.$index,scope.row)" :is-clearable="true" v-title="scope.row.name"/>
  15.                 </el-form-item>
  16.               </template>
  17.           </el-table-column>
  18.  
  19.           <el-table-column label="风险管控类型" slot="fxgklx" align="center" width="248"   :render-header="addRedStar">
  20.               <template slot-scope="scope">
  21.                 <el-form-item :rules="[ { required: true, message: '', trigger: 'change' } ]" :prop="'tableData.' + scope.$index + '.fxgklx'">
  22.                   <el-select style="width:224px" v-model="scope.row.fxgklx" clearable>
  23.                     <el-option v-for="item in fxgklxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  24.                   </el-select>
  25.                 </el-form-item>
  26.               </template>
  27.           </el-table-column>
  28.  
  29.           <el-table-column label="触发数据/业务类型" slot="ywlx" align="center" width="248"   :render-header="addRedStar">
  30.               <template slot-scope="scope">
  31.                 <el-form-item :rules="[ { required: true, message: '', trigger: 'change' } ]" :prop="'tableData.' + scope.$index + '.ywlx'">
  32.                   <N20-input-search class="defind-input-width" v-model="scope.row.ywlx" readonly @click.native="chooseIndicator(scope.$index,scope.row)" :is-clearable="true" v-title="scope.row.ywlx"/>
  33.                 </el-form-item>
  34.               </template>
  35.           </el-table-column>
  36.  
  37.           <el-table-column label="频率" slot="pl" align="center" width="116"   :render-header="addRedStar">
  38.               <template slot-scope="scope">
  39.                 <el-form-item :rules="[ { required: true, message: '', trigger: 'change' } ]" :prop="'tableData.' + scope.$index + '.pl'">
  40.                   <el-select style="width:100px" v-model="scope.row.pl" clearable>
  41.                     <el-option v-for="item in fxgklxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  42.                   </el-select>
  43.                 </el-form-item>
  44.               </template>
  45.           </el-table-column>
  46.  
  47.           <el-table-column label="适用单位设置" slot="sydwsz" align="center" width="118" >
  48.               <template slot-scope="scope">
  49.                 <el-form-item>
  50.                   <el-button type="text" @click="handleSetting(scope.row)">设置</el-button>
  51.                 </el-form-item>
  52.               </template>
  53.           </el-table-column>
  54.  
  55.           <el-table-column slot="yz" align="center" width="400">
  56.             <template slot="header">
  57. 							<span><span style="color:red;margin-right: 4px">*</span>阈值</span><i class="n20-icon-xinxitishi" style="margin-left: 4px" v-title="'实际场景规则无对比阈值的，此项可空，比例类型阈值需转换成小数类型数值项输入'" />
  58. 						</template>
  59.             <template slot-scope="scope">
  60.               <el-form-item :rules="[ { required: true, message: '', trigger: 'change' } ]" :prop="'tableData.' + scope.$index + '.yz'">
  61.                 <el-select style="width:100px;margin-right:4px" v-model="scope.row.yz" clearable>
  62.                   <el-option v-for="item in fxgklxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  63.                 </el-select>
  64.                 <el-input style="width:224px;margin-right:4px" v-model="scope.row.yz" clearable/>
  65.                 <el-button icon="n20-icon-xinzeng" type="text" @click="handleTableAdd(scope.row,scope.$index)"></el-button>
  66.                 <el-button icon="n20-icon-a-shanchuxuanzhong" type="text" @click="handleTableDel(scope.row,scope.$index)"></el-button>
  67.               </el-form-item>
  68.             </template>
  69.           </el-table-column>
  70.  
  71.           <el-table-column label="风险等级" slot="fxdj" align="center" width="118"   :render-header="addRedStar">
  72.             <template slot-scope="scope">
  73.               <el-form-item :rules="[ { required: true, message: '', trigger: 'change' } ]" :prop="'tableData.' + scope.$index + '.fxdj'">
  74.                 <el-select style="width:100px" v-model="scope.row.fxdj" clearable>
  75.                   <el-option v-for="item in fxgklxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  76.                 </el-select>
  77.               </el-form-item>
  78.             </template>
  79.           </el-table-column>
  80.  
  81.           <el-table-column label="风险事件设置" slot="fxsjsz" align="center" width="118" >
  82.               <template slot-scope="scope">
  83.                 <el-form-item>
  84.                   <el-button type="text" @click="handleSetting(scope.row)">设置</el-button>
  85.                 </el-form-item>
  86.               </template>
  87.           </el-table-column>
  88.         </N20-table>
  89.       </el-form>
  90.     </N20-expandable-pane>
  91.     <div class="operate-box" style="right:6px;width: calc(100% - 12px);left: 6px;">
  92.       <el-button @click="handleConfirm('saveAndStart')" type="primary">保存启用</el-button>
  93.       <el-button plain @click="handleConfirm('save')" >保存</el-button>
  94.     </div>
  95.   </div>
  96. </template>

        2）、JS代码

  1. export default {
  2.   name: 'dispositionAdd',//风险场景配置 新增
  3.   data () {
  4.     return {
  5.       isIndexShow: false,
  6.       indexRecordData: {},
  7.       indexNum:0,
  8.       formData: {
  9.         yjfxcj: null,//一级风险场景
  10.         ywcjbh:null,//业务场景编号
  11.         ywcjmc:null,//业务场景名称
  12.         gzmc:null,//规则名称
  13.         gzlx:null,//规则类型
  14.         ywcjms:null,//业务场景描述
  15.       },
  16.       formUnitData: {
  17.         hyfl:null,//行业分类
  18.         dwmc:null,//单位名称
  19.         dwbh: null,//单位编号
  20.         current: 1,
  21.         size: 100,
  22.         total: 0,
  23.       },
  24.       flag:false,
  25.       rules: {
  26.         yjfxcj: [
  27.           { required: true, message: '请输入', trigger: 'blur' }
  28.         ],
  29.         ywcjbh: [
  30.           { required: true, message: '请输入', trigger: 'blur' }
  31.         ],
  32.         ywcjmc: [
  33.           { required: true, message: '请输入', trigger: 'blur' }
  34.         ],
  35.         gzmc: [
  36.           { required: true, message: '请输入', trigger: 'blur' }
  37.         ],
  38.       },
  39.       formTableData: {
  40.         tableData: [
  41.           { name: '上下游单位同名', type: '指标', fxgklx: '事前预测', ywlx: '',index:'1' },
  42.           { name: '上下游单位同名', type: '指标', fxgklx: '事前预测', ywlx: '',index:'1' },
  43.           { name: '上下游单位同名', type: '指标', fxgklx: '事前预测', ywlx: '',index:'1' },
  44.           { name: '同名双向结算', type: '指标', fxgklx: '事后预警', ywlx: '', index: '2' },
  45.           { name: '贸易合同异常模型', type: '评价模型', fxgklx: '事后预警', ywlx:'',index:'3' },
  46.           { name: '反洗钱模型', type: '计算模型', fxgklx: '事后预警', ywlx:'',index:'4' },
  47.         ]
  48.       },
  49.       fxgklxOptions: [],
  50.       rowSpanArr: [],
  51.       columns: [
  52.         { type: 'selection', align: 'center', width: '46' },
  53.         { prop: 'index', label:'序号', align: 'center', width: '80' },
  54.         { label: '指标模型名称', align: 'center', slotName: 'name' },
  55.         { label: '类型', align: 'center', prop: 'type' },
  56.         { label: '风险管控类型', align: 'center', slotName: 'fxgklx' },
  57.         { label: '触发数据/业务类型', align: 'center', slotName: 'ywlx' },
  58.         { label: '频率', align: 'center', slotName: 'pl' },
  59.         { label: '适用单位设置', align: 'center', slotName: 'sydwsz' },
  60.         { label: '阈值', align: 'center', slotName: 'yz' },
  61.         { label: '风险等级', align: 'center', slotName: 'fxdj' },
  62.         { label: '风险事件设置', align: 'center', slotName: 'fxsjsz' },
  63.       ],
  64.       sltList: [],//table 复选框 选择集合
  65.     }
  66.   },
  67.   created() {
  68.     // 模拟 处理table数据  收集要合并的数据
  69.     this.handleTableData(this.formTableData.tableData)
  70.   },
  71.   methods: {
  72.     // 保存 和 保存启用
  73.     handleConfirm (type) {
  74.       console.log('formTableData',this.formTableData)
  75.       if (this.handleValidate()) {
  76.         switch (type) {
  77.           case 'saveAndStart':
  78.             break;
  79.         
  80.           default:
  81.             break;
  82.         }
  83.       }
  84.     },
  85.     // 校验所有表单
  86.     handleValidate () {
  87.       let flag = false
  88.       let validateList = ['formTableData','formRef']
  89.       validateList.map(item=>{
  90.         this.$refs[item].validate((valid) => {
  91.           if (valid) {
  92.             flag = true
  93.           } else {
  94.             flag = false
  95.           }
  96.         })
  97.       })
  98.       return flag
  99.     },
  100.     // table  新增
  101.     handleTableAdd (row,index) {
  102.       let tableData = JSON.parse(JSON.stringify(this.formTableData.tableData))
  103.       tableData.splice(index,0,row)
  104.       console.log('tableData----新增---->>>',tableData)
  105.       this.$set(this.formTableData, 'tableData', tableData)
  106.       // 处理table数据  收集要合并的数据
  107.       this.handleTableData(this.formTableData.tableData)
  108.     },
  109.     // table  删除
  110.     handleTableDel (row, index) {
  111.       console.log('table---删除单个--->>>',row, index)
  112.       let tableData = JSON.parse(JSON.stringify(this.formTableData.tableData))
  113.       if (Array.isArray(tableData) && tableData.length && tableData.indexOf(row)) {
  114.         tableData.splice(index, 1);
  115.         let tableDataOther = JSON.parse(JSON.stringify(tableData))
  116.         this.handleSetArray(tableDataOther).map((item, index) => {
  117.             let num = index + 1
  118.             tableData.map(ele => {
  119.               if (item.index == ele.index) {
  120.                 ele.index = num
  121.               }
  122.             })
  123.           })
  124.         this.$set(this.formTableData, 'tableData', tableData)
  125.          // 处理table数据  收集要合并的数据
  126.         this.handleTableData(this.formTableData.tableData)
  127.       }
  128.     },
  129.     // 新增 复制 删除
  130.     handleClick (type) {
  131.        // tableData table的数据源
  132.       let tableData = JSON.parse(JSON.stringify(this.formTableData.tableData))
  133.       // 复选之后数组收集
  134.       let sltList = JSON.parse(JSON.stringify(this.sltList))
  135.       if (type == 'add') { 
  136.         // 新增
  137.         let num = this.handleSetArray(tableData).length
  138.         let tableDataItem = { name: '', type: '', fxgklx: '', ywlx: '',index:num+1 }
  139.         this.formTableData.tableData.push(tableDataItem)
  140.       } else if(type == 'copy'){
  141.         // 复制
  142.         if (!sltList.length)  this.$message.info('请选择数据')
  143.         // this.flag为true则是全选  为false则为不全选，因为点击复制之后 复选框全部清除勾选，所以点击全选之后再点击单选，flag还是为true，则走的还是全选的逻辑，所以得重置为false
  144.         this.flag = false
  145.         // sltListOther 作用是 对比去重之后的数据 给index赋值
  146.         let sltListOther = JSON.parse(JSON.stringify(this.sltList))
  147.         // 收集 去重之后的table的长度，用于复制的序列号的使用
  148.         let num = this.handleSetArray(tableData).length
  149.         // 去重复选框勾选的集合
  150.         sltList = this.handleSetArray(sltList)
  151.         console.log('复制---sltList--->>>', sltList)
  152.         sltList.map(item => {
  153.           num++
  154.           sltListOther.map((ele=>{
  155.             if (item.index == ele.index) {
  156.               ele.index = num
  157.             }
  158.           }))
  159.         })
  160.         console.log('复制---sltListOther--->>>', sltListOther)
  161.         // 合并table和复选框选择的数据 最后赋值给tableData
  162.         let copyArr = this.formTableData.tableData.concat(sltListOther)
  163.         console.log('复制---copyArr--->>>',copyArr)
  164.         this.formTableData.tableData = copyArr
  165.       } else {
  166.         // 删除
  167.         if (sltList.length) {
  168.           sltList.map(item => {
  169.             tableData.map((ele,index) => {
  170.               if (item.index == ele.index) {
  171.                 tableData.splice(index, 1);
  172.               }
  173.             })
  174.           })
  175.           console.log('删除---tableData--->>>',tableData)
  176.           let tableDataOther = JSON.parse(JSON.stringify(tableData))
  177.           console.log('删除---tableDataOther--->>>',tableDataOther)
  178.           this.handleSetArray(tableData).map((item, index) => {
  179.             let num = index + 1
  180.             tableDataOther.map(ele => {
  181.               if (item.index == ele.index) {
  182.                 ele.index = num
  183.               }
  184.             })
  185.           })
  186.           this.$set(this.formTableData,'tableData',tableDataOther)
  187.           console.log('删除--->>>',this.formTableData.tableData)
  188.         } else {
  189.           this.$message.info('请选择数据')
  190.         }
  191.       }
  192.       // 处理table数据  收集要合并的数据
  193.       this.handleTableData(this.formTableData.tableData)
  194.       this.sltList = []
  195.     },
  196.     // 根据index去重
  197.     handleSetArray (arr = []) {
  198.       if (Array.isArray(arr)) {
  199.         for (let i = 0; i < arr.length; i++) {
  200.           for (let j = i + 1; j < arr.length; j++) {
  201.             if (arr[i].index == arr[j].index) {
  202.               arr.splice(j, 1);
  203.               j--
  204.             }
  205.           }
  206.         }
  207.         return arr
  208.       } else {
  209.         return []
  210.       }
  211.     },
  212.     //  @select="handleTableSelection" table的单选事件
  213.     handleTableSelection(val,row){
  214.       // table的数据源
  215.       let tableData = [...this.formTableData.tableData]
  216.       // 点击table复选框 收集 数据源
  217.       let sltList = [...this.sltList]
  218.       // flag为true的时候代表的是全选 为false则代表不全选
  219.       // 全选--勾选or不勾选逻辑
  220.       if(this.flag){
  221.         // isSelect为true代表全选之后点击取消 
  222.         // isSelect为false代表全选之后点击取消然后又点勾选
  223.         let isSelect = sltList.length && sltList.indexOf(row) > -1
  224.         // 收集第一次勾选取消之后 收集原来勾选的数据
  225.         let sltListCheck = []
  226.         if(isSelect){
  227.           tableData.forEach(item=>{
  228.             if(item.index != row.index){
  229.               sltListCheck.push(item)
  230.             }
  231.           })
  232.           this.sltList = sltListCheck
  233.         }else{
  234.           // 当再次勾选的时候 在原有的sltList集合 push新的勾选数据
  235.           tableData.forEach(item=>{
  236.             if(item.index == row.index){
  237.               this.sltList.push(item)
  238.             }
  239.           })
  240.         }
  241.         console.log('全选--勾选or不勾选逻辑-->>',this.sltList)
  242.       }else{
  243.         // 不全选--勾选or不勾选逻辑
  244.         let checkList = []
  245.         if (tableData.length && val.length) {
  246.           // tableData为table数据数组
  247.           // val为复选框选择之后的数组
  248.           // 两个数组相互比较 如果index相同 则收集到checkList数组里面
  249.           tableData.forEach(item => {
  250.             val.forEach(ele => {
  251.               if (item.index == ele.index) {
  252.                 checkList.push(item)
  253.               }
  254.             })
  255.           })
  256.         }
  257.         this.sltList = checkList
  258.         console.log('不全选--勾选or不勾选--sltList-->>>',this.sltList)
  259.       }
  260.     },
  261.     // @select-all="handleTableSelectionAll" table的全选事件
  262.     handleTableSelectionAll(sltList){
  263.       if (sltList.length) {
  264.         // flag为true的时候代表的是全选 为false则代表不全选
  265.         // sltList 为点击table复选框 收集 数据源
  266.         this.flag = true
  267.         this.sltList = this.formTableData.tableData
  268.       }else{
  269.         this.flag = false
  270.         this.sltList = []
  271.       }
  272.       console.log('handleTableSelectionAll',this.sltList)
  273.     },
  274.  
  275.  
  276.     // 单位选择 确认
  277.     handleConfirmIndex (val) {
  278.       console.log('单位选择 确认', val)
  279.       let tableData = [ ...this.formTableData.tableData ] 
  280.       let indexRecordData = this.indexRecordData
  281.       tableData.forEach((item,index) => {
  282.         if (item.index == indexRecordData.index) {
  283.           tableData[index].name = val.name
  284.         }
  285.       })
  286.       this.$set( this.formTableData,'tableData',tableData)
  287.       this.isIndexShow = false
  288.     },
  289.     // 单位选择 取消
  290.     handleCloseUnit () {
  291.       this.isIndexShow = false
  292.     },
  293.     // 设置
  294.     handleSetting (row) {
  295.       
  296.     },
  297.     // 处理table数据  收集要合并的数据
  298.     handleTableData (tableData = []) {
  299.       let rowSpanArr = []
  300.       let position = 0
  301.       if (!!tableData && Array.isArray(tableData)) {
  302.         tableData.map((item, index) => {
  303.           if (index == 0) {
  304.             rowSpanArr.push(1)
  305.             position = 0
  306.           } else {
  307.             if (item.index == tableData[index - 1].index) {
  308.               rowSpanArr[position] += 1
  309.               rowSpanArr.push(0)
  310.             } else {
  311.               rowSpanArr.push(1)
  312.               position = index
  313.             }
  314.           }
  315.         })
  316.       }
  317.      
  318.       this.rowSpanArr = rowSpanArr
  319.     },
  320.     // table合并单元格
  321.     objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  322.       if (columnIndex != 8 && columnIndex != 9 && columnIndex != 10) {
  323.         let rowspan = this.rowSpanArr[rowIndex]
  324.         return {
  325.           rowspan: rowspan,
  326.           colspan: 1
  327.         };
  328.       }
  329.     },
  330.     // 选择指标模型 并带出数据 和 下标
  331.     // index 下标 indicator带出的数据
  332.     chooseIndicator (index, indicator) {
  333.       this.isIndexShow = true
  334.       this.indexRecordData = indicator
  335.       this.indexNum = index
  336.     },
  337.     // 处理table 星号 变红
  338.     addRedStar(h, { column }) {
  339.       return [
  340.           h("span", { style: "color: red" }, "*"),
  341.           h("span", " " + column.label),
  342.       ];
  343.     },
  344.   },
  345. }
  346.  
  347. </script>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/965230
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号