這篇文章主要介紹了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"
}
]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。