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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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中数组的三种排序方法分享
2012/05/07 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python双向循环链表实现方法分析
2018/07/30 Python
浅析python的Lambda表达式
2019/02/27 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
什么是Rollback Segment
2013/04/22 面试题
英文自荐信
2013/12/19 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
网络优化专员求职信
2014/05/04 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs