前言
在后台管理系统中，经常有合并单元格的需求。
所以为了提高后续的开发效率，就开发了一款插件插件：@jinming6/merge-helper
合并 “ 行 ”
文章来源：https://www.toymoban.com/news/detail-833371.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
<body>
<div id="app">
<el-table border :data="tableData" :span-method="spanMethod">
<el-table-column label="序号" :prop="SORT_NO_KEY"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="省份" prop="provinces"></el-table-column>
</el-table>
</div>
<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
<script src="https://unpkg.com/@jinming6/merge-helper@1.2.1/dist/mergeHelper.js"></script>
<script>
const { createApp, ref, onMounted } = Vue;
const { getMergedData, Mode, getFieldSpan, constants } = window['@jinming6/mergeHelper']
const { SORT_NO_KEY } = constants
const app = createApp({
setup() {
const tableData = ref([])
const getTableData = () => {
const data = [
{
name: '张三',
age: 18,
provinces: '山东省'
},
{
name: '张三',
age: 18,
provinces: '山东省'
},
{
name: '李四',
age: 18,
provinces: '山东省'
},
{
name: '王五',
age: 20,
provinces: '江苏省'
},
]
const options = {
mode: Mode.Row,
dataSource: data,
mergeFields: [{
field: 'name',
callback(curItem, nextItem) {
return curItem.name === nextItem.name
}
}, 'age', 'provinces'],
genSort: true,
}
const mergedData = getMergedData(options)
tableData.value = mergedData;
console.log(mergedData)
}
const spanMethod = ({ row, columnIndex }) => {
if (columnIndex <= 1) {
return getFieldSpan(row, 'name');
}
if (columnIndex === 2) {
return getFieldSpan(row, 'age');
}
if (columnIndex === 3) {
return getFieldSpan(row, 'provinces');
}
return {
rowspan: 1,
colspan: 1,
};
}
onMounted(() => {
getTableData()
})
return {
tableData,
spanMethod,
SORT_NO_KEY
}
}
})
app.use(ElementPlus)
app.mount('#app')
</script>
</body>
</html>
合并 “ 列 ”
文章来源地址https://www.toymoban.com/news/detail-833371.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
<body>
<div id="app">
<el-table border :data="tableData" :span-method="spanMethod">
<el-table-column label="序号" type="index" width="80"></el-table-column>
<el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
:type="item.type" :width="item.width" align="center"></el-table-column>
</el-table>
</div>
<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
<script src="https://unpkg.com/@jinming6/merge-helper@1.2.1/dist/mergeHelper.js">
<script>
const { createApp, ref, onMounted } = Vue;
const { getMergedData, Mode, getFieldSpan, constants } = window['@jinming6/mergeHelper']
const { SORT_NO_KEY } = constants
const app = createApp({
setup() {
const tableData = ref([])
const columns = [
{
label: '姓名',
prop: 'name'
},
{
label: '年龄',
prop: 'age'
},
{
label: '省份',
prop: 'provinces'
},
{
label: '市',
prop: 'city'
},
{
label: '区/县',
prop: 'county'
},
]
const getTableData = () => {
const data = [
{
name: '张三',
age: 18,
provinces: '山东省',
city: '青岛市',
county: '崂山区'
},
{
name: '李四',
age: 20,
provinces: '北京市',
city: '北京市',
county: '北京市'
},
{
name: '王五',
age: 21,
provinces: '江苏省',
city: '南京市',
county: '雨花台区'
},
{
name: '马六',
age: 22,
provinces: '上海市',
city: '上海市',
county: '上海市'
},
]
const options = {
mode: Mode.Col,
dataSource: data,
mergeFields: columns.map((item) => item.prop),
columns
}
const mergedData = getMergedData(options)
tableData.value = mergedData;
}
const spanMethod = ({ row, column }) => getFieldSpan(row, column.property)
onMounted(() => {
getTableData()
})
return {
columns,
tableData,
spanMethod,
SORT_NO_KEY
}
}
})
app.use(ElementPlus)
app.mount('#app')
</script>
</body>
</html>
到了这里，关于前端合并单元格插件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
