element-ui中Table表格省市区合并单元格的方法实现


Posted in Javascript onAugust 07, 2019

本文介绍了element-ui中Table表格省市区合并单元格的方法实现,分享给大家,具体如下:

效果如图

element-ui中Table表格省市区合并单元格的方法实现

代码如下:

<template>
 <div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
   <el-form-item label="搜索">
    <el-input v-model="formInline.search" placeholder="搜索"></el-input>
   </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
   </el-form-item>
  </el-form>
  <el-table
   :data="tableData"
   border
   v-loading="loading"
   element-loading-text="拼命加载中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.8)"
   :span-method="arraySpanMethod"
   style="width: 100%">
   <el-table-column
    prop="province"
    label="省"
    width="150">
   </el-table-column>
   <el-table-column
    prop="city"
    label="市"
    width="150">
   </el-table-column>
   <el-table-column
    prop="zone"
    label="区"
    width="150">
   </el-table-column>
   <el-table-column
    prop="remake"
    label="备注">
    <template slot-scope="scope">
     <template v-if="scope.row.edit">
      <el-input class="edit-input" size="small" v-model="scope.row.remake"></el-input>
     </template>
     <span v-else>{{ scope.row.remake }}</span>
    </template>
   </el-table-column>
   <el-table-column
    prop="publicSubsidy"
    sortable
    label="国补"
    width="150">
    <template slot-scope="scope">
     <template v-if="scope.row.edit">
      <el-input class="edit-input" size="small" v-model="scope.row.publicSubsidy"></el-input>
     </template>
     <span v-else>{{ scope.row.publicSubsidy }}</span>
    </template>
   </el-table-column>
   <el-table-column
    prop="provinceSubsidy"
    sortable
    label="省补"
    width="150">
    <template slot-scope="scope">
     <template v-if="scope.row.edit">
      <el-input class="edit-input" size="small" v-model="scope.row.provinceSubsidy"></el-input>
     </template>
     <span v-else>{{ scope.row.provinceSubsidy }}</span>
    </template>
   </el-table-column>
   <el-table-column
    prop="citySubsidy"
    sortable
    label="市补"
    width="150">
    <template slot-scope="scope">
     <template v-if="scope.row.edit">
      <el-input class="edit-input" size="small" v-model="scope.row.citySubsidy"></el-input>
     </template>
     <span v-else>{{ scope.row.citySubsidy }}</span>
    </template>
   </el-table-column>
   <el-table-column align="center" label="Actions" width="200">
    <template slot-scope="scope">
     <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small"
           icon="el-icon-circle-check-outline">Ok
     </el-button>
     <el-button v-if="scope.row.edit" class='cancel-btn' size="small" icon="el-icon-refresh" type="warning"
           @click="cancelEdit(scope.row)">cancel
     </el-button>
     <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">
      Edit
     </el-button>
    </template>
   </el-table-column>
  </el-table>
 </div>
</template>
<script>
 import axios from 'axios'
 export default {
  name: "city",
  data() {
   return {
    tableData: [], //table的数据
    originalData: [],//table数据备份
    provinceArr: [], //省份要合并数组 [2,0,1,3,0,0] 代表第一二行合并,第三行不变,第四五六行合并,0代表原本的那一行被合并,因此这个列被消除
    provincePos: 0, //省份要合并数组内容的序号
    cityArr: [], //同上 市
    cityPos: [],
    zoneArr: [],//同上 区
    zonePos: [],
    formInline: { //form表单
     search: ''
    },
    loading: false
   }
  },
  created() {
   this.init()
  },
  methods: {
   init() {
    this.loading = true;
    axios.get('./static/table.json')
     .then(res => {
      this.loading = false;
      this.tableData = res.data.map((v, index) => {
       this.$set(v, 'edit', false) //增加一个新的属性

       //可以修改的属性值,进行添加一个对应的原本值
       v.originalRemake = v.remake;
       v.originalPublicS = v.publicSubsidy;
       v.originalProvinceS = v.provinceSubsidy;
       v.originalCityS = v.citySubsidy;
       return v
      })
      this.originalData = this.tableData;
      this.merage() //合并的方法
     })
     .catch(e => {
      console.log(e)
     })
   },
   cancelEdit(row) {
    //取消编辑,把原本值进行覆盖回来
    row.remake = row.originalRemake
    row.publicSubsidy = row.originalPublicS
    row.provinceSubsidy = row.originalProvinceS
    row.citySubsidy = row.originalCityS
    row.edit = false
    this.$message({
     message: 'The title has been restored to the original value',
     type: 'warning'
    })
   },
   confirmEdit(row) {
    row.edit = false

    //把新的值,覆盖原本值,以防再次修改
    row.originalRemake = row.remake
    row.originalPublicS = row.publicSubsidy
    row.originalProvinceS = row.provinceSubsidy
    row.originalCityS = row.citySubsidy
    this.$message({
     message: 'The title has been edited',
     type: 'success'
    })
   },
   arraySpanMethod({row, column, rowIndex, columnIndex}) {
    if (columnIndex === 0) {
     //第一列的合并方法,省
     const _row_1 = this.provinceArr[rowIndex];
     const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
     return {
      rowspan: _row_1,
      colspan: _col_1
     }
    } else if (columnIndex === 1) {
     //第二列的合并方法,市
     const _row_2 = this.cityArr[rowIndex];
     const _col_2 = _row_2 > 0 ? 1 : 0;
     return {
      rowspan: _row_2,
      colspan: _col_2
     }
    } else if (columnIndex === 2) {
     //第三列的合并方法,区
     const _row_3 = this.zoneArr[rowIndex];
     const _col_3 = _row_3 > 0 ? 1 : 0;
     return {
      rowspan: _row_3,
      colspan: _col_3
     }
    }
   },
   merage() {
    //要合并的数组的方法
    this.merageInit();
    for (var i = 0; i < this.tableData.length; i++) {
     if (i === 0) {
      //第一行必须存在
      this.provinceArr.push(1);
      this.provincePos = 0;

      this.cityArr.push(1);
      this.cityPos = 0;
      this.zoneArr.push(1);
      this.zonePos = 0;
     }
     else {
      // 判断当前元素与上一个元素是否相同 this.provincePos是provinceArr内容的序号

      //省
      if (this.tableData[i].province === this.tableData[i - 1].province) {
       this.provinceArr[this.provincePos] += 1;
       this.provinceArr.push(0);
      } else {
       this.provinceArr.push(1);
       this.provincePos = i;
      }

      //市
      if (this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) {
       this.cityArr[this.cityPos] += 1;
       this.cityArr.push(0);
      } else {
       this.cityArr.push(1);
       this.cityPos = i;
      }

      //区
      if (this.tableData[i].zone === this.tableData[i - 1].zone && this.tableData[i].city === this.tableData[i - 1].city && this.tableData[i].province === this.tableData[i - 1].province) {
       this.zoneArr[this.zonePos] += 1;
       this.zoneArr.push(0);
      } else {
       this.zoneArr.push(1);
       this.zonePos = i;
      }
     }
    }
   },
   merageInit() {
    //初始化省市区的合并行的数组
    this.provinceArr = [];
    this.provincePos = 0;
    this.cityArr = [];
    this.cityPos = 0;
    this.zoneArr = [];
    this.zonePos = 0;
   },
   onSubmit() {
    const filterData = this.originalData; //每次过滤之前都要把筛选之前的tableData重置
    this.tableData = filterData.filter(value => {
     if (this.formInline.search === value.province || this.formInline.search === value.city || this.formInline.search === value.zone) {
      return value;
     } else if (this.formInline.search === '') {
      return value;
     } else if (value.province.includes(this.formInline.search) || value.city.includes(this.formInline.search) || value.zone.includes(this.formInline.search)) {
      return value;
     }
    })
    this.merage();
   }
  }
 }
</script>
<style scoped>
</style>

static文件下的table.json

[
 {
  "province": "浙江省",
  "city": "杭州市",
  "zone": "余杭区",
  "type": "ICBC",
  "remake": "2017-2018年期间建成并网的分布式光伏",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.1",
  "citySubsidy": "0.1"
 },
 {
  "province": "浙江省",
  "city": "杭州市",
  "zone": "余杭区",
  "type": "DWE",
  "remake": "对居民住宅单独建设的光伏发电项目",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.1",
  "citySubsidy": "0."
 },
 {
  "province": "浙江省",
  "city": "杭州市",
  "zone": "萧山区",
  "type": "DWE",
  "remake": "对居民住宅单独建设的光伏发电项目",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.1",
  "citySubsidy": "0."
 },
 {
  "province": "安徽省",
  "city": "阜阳市",
  "zone": "太和县",
  "type": "ALL",
  "remake": "对居民住宅单独建设的光伏发电项目",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.2",
  "citySubsidy": "0.1"
 },
 {
  "province": "安徽省",
  "city": "合肥市",
  "zone": "蜀山区",
  "type": "ALL",
  "remake": "对居民住宅单独建设的光伏发电项目",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.2",
  "citySubsidy": "0.1"
 },
 {
  "province": "安徽省",
  "city": "合肥市",
  "zone": "庐阳区",
  "type": "ALL",
  "remake": "对居民住宅单独建设的光伏发电项目",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.2",
  "citySubsidy": "0.1"
 },
 {
  "province": "浙江省",
  "city": "杭州市",
  "zone": "西湖区",
  "type": "ALL",
  "remake": "2017-2018年期间建成并网的分布式光伏",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.1",
  "citySubsidy": "0.2"
 },
 {
  "province": "浙江省",
  "city": "嘉兴市",
  "zone": "海盐县",
  "type": "ALL",
  "remake": "对居民住宅单独建设的光伏发电项目",
  "publicSubsidy": "0.37",
  "provinceSubsidy": "0.2",
  "citySubsidy": "0.1"
 }
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 #Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 #Javascript
vue 集成jTopo 处理方法
Aug 07 #Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 #Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 #Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
You might like
解析php中的escape函数
2013/06/29 PHP
php从字符串创建函数的方法
2015/03/16 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
网上抓的一个特效
2007/05/11 Javascript
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
微信小程序多张图片上传功能
2017/06/07 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
vue 开发企业微信整合案例分析
2019/12/02 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
旅游专业职业生涯规划范文
2014/01/13 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
网络编辑岗位职责
2014/03/18 职场文书
村庄绿化方案
2014/05/07 职场文书
关爱老人标语
2014/06/21 职场文书
白酒代理协议书范本
2014/10/26 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
Python pygame实现中国象棋单机版源码
2021/06/20 Python