<template>
<el-table
:data="dataSource"
:span-method="objectSpanMethod"
>
<el-table-column
label="分组名称"
width="100"
align="center"
prop="groupName"
/>
<el-table-column
prop="type"
label="类型"
align="center"
width="100"
/>
<el-table-column
prop="fastCoding"
label="快捷编码"
align="center"
width="70"
/>
<el-table-column
label="快捷语"
width="350"
>
<template slot-scope="scope">
<img
:src="scope.row.content"
class="imgSize"
>
</template>
</el-table-column>
<el-table-column
prop="shortFastType"
label="快捷语类型"
align="center"
width="120"
/>
<el-table-column
prop="updateTime"
label="更新时间"
align="center"
width="150"
/>
<el-table-column
align="center"
label="操作"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="editShortcut(scope.row)"
>
编辑快捷语
</el-button>
<el-button
type="text"
size="small"
@click="delData(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data () {
return {
dataSource: [], // 列表
spanArr: [], // 记录每一行的合并数
pos: 0// 记录索引
};
},
mounted () {
this.spanArr = [];
this.getSpanArr(this.dataSource);
},
methods: {
getSpanArr (data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].groupName === data[i - 1].groupName) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
};
}
}
});
</script>