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

 更新时间:2019年08月07日 14:27:32   作者:mf_717714  
这篇文章主要介绍了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"
 }
]

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

相关文章

  • nuxt.js 缓存实践

    nuxt.js 缓存实践

    这篇文章主要介绍了nuxt.js 缓存实践,nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存,本文就详细的介绍了这三种缓存,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js单页滚动插件

    这篇文章主要为大家详细介绍了基于vue的fullpage.js单页滚动插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue写一个简单的倒计时按钮功能

    Vue写一个简单的倒计时按钮功能

    这篇文章主要介绍了基于Vue写一个简单的倒计时按钮功能,在项目开发的过程,经常会遇到发送验证码,点击之后有60秒倒计时的按钮,今天小编就给大家分享实例代码,需要的朋友参考下吧
    2018-04-04
  • vue脚手架搭建项目的兼容性配置详解

    vue脚手架搭建项目的兼容性配置详解

    这篇文章主要介绍了vue脚手架搭建项目的兼容性配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue 之孙组件向爷组件通信的实现

    Vue 之孙组件向爷组件通信的实现

    这篇文章主要介绍了Vue 之孙组件向爷组件通信的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 在vue-cli创建的项目中使用sass操作

    在vue-cli创建的项目中使用sass操作

    这篇文章主要介绍了在vue-cli创建的项目中使用sass操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解如何在Vue里建立长按指令

    详解如何在Vue里建立长按指令

    这篇文章主要介绍了详解如何在Vue里建立长按指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

    vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

    这篇文章主要介绍了vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 详解mpvue中使用vant时需要注意的onChange事件的坑

    详解mpvue中使用vant时需要注意的onChange事件的坑

    这篇文章主要介绍了详解mpvue中使用vant时需要注意的onChange事件的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue2.0实现的tab标签切换效果(内容可自定义)示例

    vue2.0实现的tab标签切换效果(内容可自定义)示例

    这篇文章主要介绍了vue2.0实现的tab标签切换效果,结合实例形式分析了vue.js实现内容可自定义的tab点击切换功能相关操作技巧,需要的朋友可以参考下
    2019-02-02

最新评论