element-ui中Table表格省市區合併單元格
阿新 • • 發佈:2019-02-19
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();
}
}
}