element-ui中Table表格省市区合并单元格的方法实现
(编辑：jimmy 日期: 2024/5/9 浏览：3 次 )
本文介绍了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 "htmlcode">
[
{
"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"
}
]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：Vue+Typescript中在Vue上挂载axios使用时报错问题