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(); } } }

element-ui中Table表格省市區合併單元格

element-ui中Table表格省市區合併單元格

element-ui中 table表格hover 修改背景色

Element Ui中table實現表格編輯效果

table：表格設定table-layout：fixed屬性後，如果表格中第一行出現合併單元格，那麼後面tr中的td設定寬度無效

vue element-ui中table合計指定列求和

實現element-ui中table點選一行展開

element-ui的table表格的toggleRowExpansion方法展開指定行

Gitbook/Markdown中插入複雜（合併單元格）的表格

element-ui中table表頭新增元素（或者圖示）

jxl生成表格（合併單元格，字型，樣式。。。）

JS生成表格，合併單元格

Markdown表格之合併單元格效果

原生JS 實現表格的合併單元格

element-UI el-table合併單元格

Element ui 中使用table組件實現分頁記憶選中

查找element-ui中el-table組件的行數

vue中表頭th 合併單元格，且表格列數不定的動態渲染方法

使用Element-ui的Table時表格不能顯示問題

AsposeWords操作表格合併單元格(word已經有的table 列合併指定兩個單元格既可以橫向合併也可以縱向合併)-http://www.xiaoguo123.com/p/aspose_w

element-ui合併單元格使用詳解

element-ui中Table表格省市區合併單元格

相關推薦