mirror of
https://github.com/doocs/md.git
synced 2025-01-24 04:44:46 +08:00
115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<template>
|
||
<el-dialog
|
||
title="插入表格"
|
||
class="insert__dialog"
|
||
:visible="value"
|
||
@close="$emit('input', false)"
|
||
border
|
||
>
|
||
<el-row class="tb-options" type="flex" align="middle" :gutter="10">
|
||
<el-col>
|
||
行数：
|
||
<el-input-number
|
||
v-model="rowNum"
|
||
controls-position="right"
|
||
:min="1"
|
||
:max="100"
|
||
size="small"
|
||
></el-input-number>
|
||
</el-col>
|
||
<el-col>
|
||
列数：
|
||
<el-input-number
|
||
v-model="colNum"
|
||
controls-position="right"
|
||
:min="1"
|
||
:max="100"
|
||
size="small"
|
||
></el-input-number>
|
||
</el-col>
|
||
</el-row>
|
||
<table style="border-collapse: collapse" class="input-table">
|
||
<tr :class="{ 'head-style': row === 1 }" v-for="row in rowNum+1" :key="row">
|
||
<td v-for="col in colNum" :key="col">
|
||
<el-input
|
||
align="center"
|
||
v-model="tableData[`k_${row-1}_${col-1}`]"
|
||
:placeholder="row===1?'表头':''"
|
||
/>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :type="btnType" plain @click="$emit('input', false)">取 消</el-button>
|
||
<el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "../../assets/scripts/config";
|
||
import {createTable} from '../../assets/scripts/util';
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from "vuex";
|
||
export default {
|
||
props: {
|
||
value: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
config: config,
|
||
rowNum: 3,
|
||
colNum: 3,
|
||
tableData: {}
|
||
};
|
||
},
|
||
computed: {
|
||
btnType() {
|
||
return this.nightMode ? "default" : "primary";
|
||
},
|
||
...mapState({
|
||
nightMode: state => state.nightMode,
|
||
editor: state => state.editor
|
||
})
|
||
},
|
||
methods: {
|
||
// 插入表格
|
||
insertTable() {
|
||
const cursor = this.editor.getCursor();
|
||
const table = createTable({
|
||
data: this.tableData,
|
||
rows: this.rowNum,
|
||
cols: this.colNum
|
||
});
|
||
|
||
this.tableData = {};
|
||
this.rowNum = 3;
|
||
this.colNum = 3;
|
||
this.editor.replaceSelection(`\n${table}\n`, "end");
|
||
this.$emit('input', false);
|
||
this.editorRefresh();
|
||
},
|
||
...mapMutations(["editorRefresh"])
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.tb-options {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.input-table ::v-deep .el-input__inner {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.head-style /deep/ .el-input__inner {
|
||
background-color: #f2f2f2;
|
||
}
|
||
</style>
|