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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
Angular模板表单校验方法详解
Aug 11 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
德劲1104的电路分析与改良
2021/03/01 无线电
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP使用递归生成文章树
2015/04/21 PHP
splice slice区别
2006/10/09 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
javascript 回调函数详解
2014/11/11 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
详解Python3中的Sequence type的使用
2015/08/01 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python中字符串的操作方法大全
2018/06/03 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
销售代表求职自荐信
2013/10/01 职场文书
年度考核自我鉴定
2013/11/09 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
爱护草坪标语
2014/06/24 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
信息技术研修心得体会
2016/01/08 职场文书
技术入股协议书
2016/03/22 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB