In letzter Zeit arbeite ich an verwandten Anforderungen und habe das Gefühl, dass es zu viele sich wiederholende Codes gibt. Es gibt auch viele solcher dynamischen Codes im Internet, die gut geschrieben sind, also habe ich mir die dynamischen Tabellen vieler großer Jungs ausgeliehen, kombiniert mit Anforderungen durch und vervollständigte die Tabelle, die ich brauchte.
1. Erstellen Sie relevante Dokumente
1. Konfigurationsdateien im Zusammenhang mit dem Konfigurationsordner.
2. Eine Datei „pageTable.vue“ für die Konfiguration
2. Inhalte in der pageTable-Datei
<template>
<div class="container">
<el-table :data="tableData" border style="width: 100%">
<!-- 这里是否要添加前面的序号123456 -->
<el-table-column label="序号" type="index" width="50" fixed="left"></el-table-column>
<div v-for="(col, index) in cols" :key="index">
<!-- 这里判断是什么类型 -->
<template v-if="col.type == 'input'">
<el-table-column
:prop="col.prop"
:label="col.label"
:width="col.width"
align="center"
show-overflow-tooltip
>
</el-table-column>
</template>
<!-- 这里用了字典 -->
<template v-else-if="col.type == 'select'">
<el-table-column
:prop="col.prop"
:label="col.label"
:width="col.width"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<template v-for="(item, index) in dictObj[col.dict]" >
<span :key="index" v-if="scope.row[col.prop] == item.code">{
{
item.name }}</span>
</template>
</template>
</el-table-column>
</template>
<template v-else-if="col.type == 'datePicker'">
<el-table-column
:prop="col.prop"
:label="col.label"
:width="col.width"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<span v-if="scope.row[col.prop]">{
{
scope.row[col.prop].split(" ")[0] }}</span>
</template>
</el-table-column>
</template>
</div>
<!-- 这里可以根据需看有没有需要操作按钮的 -->
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
mapState } from "vuex";
export default {
name: "pageTable",
props: {
// 接收展示数据
tableData: {
type: Array,
default() {
return [];
},
},
// 接收配置项的数据
cols: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
};
},
computed: {
// 我这里是要用到字段，所以引入了vuex
...mapState({
dictObj: (state) => state.dictionaryValueManagement.dictObj,
}),
},
methods: {
handleClick(row) {
console.log(row);
}
},
};
</script>
3. Konfigurationsbezogene Konfigurationselemente
Tatsächlich kann die Ausrichtung in der Tabellentabelle auch dynamisch sein. Ich bin hier faul und schreibe den Totpunkt direkt in die Seitentabelle
export const bkjlConfig = {
cols: [
{
width: '150', // 宽度
type: 'select', // 类型
prop: 'manageposttype', // prop接收数据
label: '分期', // label名
dict: 'manageposttype' // 匹配是哪一个字典
},
{
width: '200',
type: 'input',
prop: 'issuingauthority',
label: '机构',
},
{
width: '150',
type: 'select',
prop: 'manageposttype',
label: '岗位类别',
dict: 'manageposttype'
},
{
width: '200',
type: 'select',
prop: 'careertreecode',
label: '岗位名称',
dict: 'careertreecode'
},
{
width: '150',
type: 'datePicker',
prop: 'manageposttype',
label: '报名时间',
},
{
width: '150',
type: 'select',
prop: 'validStatus',
label: '审核状态',
dict: 'validStatus'
},
{
width: '',
type: 'input',
prop: 'appliConditions',
label: '详细信息',
},
]
}
4. Bei Bedarf verwenden
<!-- 我就不显示那么多了 -->
<div class="pageContainerCon">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="从业证书" name="1">
<PageTable :tableData="tableData1" :cols="cyzsConfig.cols"></PageTable>
</el-collapse-item>
<el-collapse-item title="报考记录" name="2">
<PageTable :tableData="tableData7" :cols="bkjlConfig.cols"></PageTable>
</el-collapse-item>
<el-collapse-item title="业务办理记录" name="3">
<PageTable
:tableData="tableData1"
:cols="ywbljlConfig.cols"
></PageTable>
</el-collapse-item>
<el-collapse-item title="证书变更记录" name="4">
<PageTable
:tableData="tableData1"
:cols="zsbgjlConfig.cols"
></PageTable>
</el-collapse-item>
</el-collapse>
</div>
<script>
import PageTable from "./pageTable.vue";
import {
cyzsConfig } from "../config/cyzsConfig.js";
import {
bkjlConfig } from "../config/bkjlConfig.js";
import {
jxjyjlConfig } from "../config/jxjyjlConfig.js";
import {
mapState } from "vuex";
export default {
name: "Detail",
components: {
PageTable,
},
props: {
ryid: {
type: String,
default() {
return "";
},
},
},
data() {
return {
formData: {
},
xlForm: {
},
activeNames: ["1", "2", "3", "4", "5", "6", "7", "8"],
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
tableData: [],
tableData1: [],
tableData5:[],
tableData7:[],
cyzsConfig: cyzsConfig,
bkjlConfig: bkjlConfig,
jxjyjlConfig: jxjyjlConfig,
};
},
computed: {
...mapState({
dictObj: (state) => state.dictionaryValueManagement.dictObj,
}),
},
methods: {
handleChange(val) {
console.log(val);
},
},
};
</script>
Dies ist wahrscheinlich die Art und Weise, wie es verwendet wird, und möglicherweise wird es in Zukunft weitere Optimierungsaktualisierungen geben.