<div id="app">
<div class="table-responsive " id="table">
<vxe-table border
resizable
class="table table-kingdargen"
:span-method="mergeRowMethod"
:data="tableData"
:cell-style="cellStyle">
<vxe-column field="depment" title="省区" width="110"></vxe-column>
<vxe-column field="truename" title="姓名" width="100"></vxe-column>
<vxe-column field="yxbfcs" title="有效拜访次数" width="120"></vxe-column>
<vxe-column field="whzxxbfcs" title="未合作学校有效拜访次数"></vxe-column>
<vxe-column field="qkcfcs" title="请客吃饭次数" ></vxe-column>
<vxe-column field="jyzgbmbfcs" title="教育主管部门拜访次数" ></vxe-column>
<vxe-column field="ldjtcs" title="领导交谈次数"></vxe-column>
<vxe-column field="bzryscs" title="班主任演示次数"></vxe-column>
<vxe-column field="xmfbwcgs" title="项目复盘表完成个数"></vxe-column>
</vxe-table>
</div>
</div>
<script src="~/vue/vue.js"></script>
<script src="~/vue/axios.min.js"></script>
<script src="~/vue/xe-utils.js"></script>
<script src="~/vue/index.umd.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
tableData: []
},
mounted() {
var that = this
axios
.get('/api/mbExt/sqMbList/@Model.rq')
.then(function (response) {
var s = response.data.data;
// console.log(s);
that.tableData = s; //decode(ss);JSON.parse
})
.catch(function (error) { // 请求失败处理
//console.log(error);
});
},
methods: {
// 通用行合并函数（将相同多列数据合并为一行）
mergeRowMethod({ row, _rowIndex, column, visibleData }) {
const fields = ['depment']
const cellValue = row[column.property]
if (cellValue && fields.includes(column.property)) {
const prevRow = visibleData[_rowIndex - 1]
let nextRow = visibleData[_rowIndex + 1]
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let countRowspan = 1
while (nextRow && nextRow[column.property] === cellValue) {
nextRow = visibleData[++countRowspan + _rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
},
cellStyle({ column, columnIndex, row, rowIndex }) {
console.log('columnIndex', columnIndex)
console.log('column', column)
console.log('row', row)
console.log('rowIndex', rowIndex)
if (columnIndex == 2) {
return { 'color': '#641E16' }
}
if (columnIndex == 3) {
return { 'color': '#76448a' }
}
if (columnIndex == 4) {
return { 'color': '#1F618D' }
}
if (columnIndex == 5) {
return { 'color': '#148F77' }
}
if (columnIndex == 6) {
return { 'color': '#1E8449' }
}
if (columnIndex == 7) {
return { 'color': '#b7950b' }
}
if (columnIndex == 8) {
return { 'color': '#AF601A' }
}
}
}
});
</script>
