路由定义

{
    path: '/type',
    component: Layout,
    redirect: 'noRedirect',
    name: 'TypeManagement',
    alwaysShow: true,
    meta: { title: '栏目管理', icon: 'users-cog', permissions: ['admin'] },
    children: [
      {
        path: 'type',
        name: 'ArticleType',
        component: () => import('@/views/type/list/index'),
        meta: {
          title: '栏目列表',
          icon: 'marker',
          permissions: ['admin'],
        },
      },
      {
        path: 'typeExtra',
        name: 'ArticleTypeExtra',
        component: () => import('@/views/type/extra/index'),
        meta: {
          title: '栏目扩展',
          icon: 'marker',
          permissions: ['admin'],
        },
      },
      {
        path: 'typeExtra/:typeId',
        name: 'ArticleTypeExtraEdit',
        component: () => import('@/views/type/extra/edit'),
        hidden: true,
        props: true,
        meta: {
          title: '编辑扩展',
          icon: 'marker',
          permissions: ['admin'],
        },
      },
    ],
  },

参数接收

<template>
  <div>
    <div class="box">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="articleType.typeName" name="first"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="box">
      <el-button type="primary" @click="handleAdd">添加变量</el-button>
    </div>
    <div class="box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          label="变量ID"
          prop="varId"
          width="80"
        ></el-table-column>
        <el-table-column
          label="变量标题"
          prop="varLabel"
          width="120"
        ></el-table-column>
        <el-table-column
          label="变量名称"
          prop="varName"
          width="120"
        ></el-table-column>
        <el-table-column
          label="变量类型"
          prop="varType"
          width="120"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          width="180"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleEdit(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="dialogForm" :model="dialogForm">
        <el-form-item label="变量标题" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.varLabel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="变量名称" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.varName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="变量类型" :label-width="formLabelWidth">
          <el-select v-model="dialogForm.varType" placeholder="请选择">
            <el-option
              v-for="item in varTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="dialogForm.varType" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item label="变量说明" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.varBrief" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="输入提示" :label-width="formLabelWidth">
          <el-input
            v-model="dialogForm.placeholder"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="默认值" :label-width="formLabelWidth">
          <el-input
            v-model="dialogForm.defaultValue"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getArcticleType,
    getTypeVarList,
    getVarTypeList,
    addTypeVar,
    setTypeVar,
    delTypeVar,
  } from '@/api/admin.js'
  export default {
    name: 'ArticleTypeExtraEdit',
    props: {
      typeId: { type: [String, Number], default: 0 },
    },
    data() {
      return {
        activeName: 'first',
        articleType: {
          typeName: '',
        },
        tableData: [],
        varTypes: [],
        pageNum: 1,
        pageSize: 10,
        dialogTitle: '添加变量',
        dialogFormVisible: false,
        formLabelWidth: '120px',
        dialogForm: {},
      }
    },
    mounted() {
      this.loadInfo()
      this.loadArticleVarList()
    },
    methods: {
      loadInfo() {
        let param = { id: this.typeId }
        getArcticleType(param).then((res) => {
          const { code, msg, data } = res
          if (code == 200) {
            this.articleType = data
          }
        })
        // 获取变量类型
        getVarTypeList().then((res) => {
          const { code, msg, data } = res
          this.varTypes = data
        })
      },
      loadArticleVarList() {
        let param = {}
        param.pageNum = this.pageNum
        param.pageSize = this.pageSize
        param.id = this.typeId

        getTypeVarList(param).then((res) => {
          const { code, msg, data } = res
          this.tableData = data.records
        })
      },
      handleEdit(index, row) {
        this.dialogTitle = '修改变量'
        this.dialogForm = { ...row }
        this.dialogFormVisible = true
      },
      handleDelete(index, row) {
        console.log('handleDelete', row)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            let param = { id: row.varId }
            delTypeVar(param).then((res) => {
              const { code, msg } = res
              if (code == 200) {
                this.$message.success('删除成功')
                this.loadArticleVarList()
              } else {
                this.$message.error(msg)
              }
            })
          })
          .catch(() => {})
      },
      handleAdd() {
        Object.keys(this.dialogForm).forEach((key) => {
          this.dialogForm[key] = ''
        })
        this.dialogForm.typeId = this.typeId
        this.dialogFormVisible = true
      },
      doSubmit() {
        if (this.dialogTitle != '修改变量') {
          this.doAddTypeVar()
        } else {
          this.doEditTypeVar()
        }
      },
      doAddTypeVar() {
        this.dialogForm.typeId = this.typeId
        addTypeVar(this.dialogForm).then((res) => {
          const { code, msg, data } = res
          if (code == 200) {
            this.$message.success('添加成功')
            this.loadArticleVarList()
            this.dialogFormVisible = false
          } else {
            this.$message.error(msg)
          }
        })
      },
      doEditTypeVar() {
        this.dialogForm.typeId = this.typeId
        setTypeVar(this.dialogForm).then((res) => {
          const { code, msg, data } = res
          if (code == 200) {
            this.$message.success('添加成功')
            this.loadArticleVarList()
            this.dialogFormVisible = false
          } else {
            this.$message.error(msg)
          }
        })
      },
    },
  }
</script>

<style>
  .box {
    margin-top: 20px;
  }
</style>