Tab切换 —— 后台数据管理

//商品查询分类
const chaxunfenlei = (id,params)=>{
    console.log(id,params)
    return server({url:`xxxx/${id}/xxx`,method: 'GET',params:{sel:params}})
}

<template>
  <div id="params">
    <card level1="商品管理" level2="商品参数" style="margin-bottom: 10px"></card>
    <el-card>
      <el-row>
        <el-col>
          <el-alert
              style="margin-bottom: 20px"
              title="注意：只允许为第三级分类设置相关参数！"
              type="warning"
              show-icon>
          </el-alert>
        </el-col>
        <i style="font-size:18px">选择商品分类：</i>
        <el-cascader
            style="margin-bottom: 20px"
            ref="cascaderRef"
            v-model="option"
            :options="addList"
            :props="defaultProps"
            show-all-levels
            @change="handleChange"></el-cascader>
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="many">
            <template>
              <el-button type="primary" size="mini" :disabled="isOk">添加参数</el-button>
            </template>
            <el-table
                :data="list"
                style="width: 100%">
              <el-table-column
                  type="index"
                  label=""
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="attr_name"
                  label="参数名称"
                  width="500">
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-row>
                    <el-button size="mini" type="primary" @click="change(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="静态参数" name="only">
            <template>
              <el-button type="primary" size="mini" :disabled="isOk">添加参数</el-button>
            </template>
            <el-table
                :data="list"
                style="width: 100%">
              <el-table-column
                  type="index"
                  label=""
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="attr_name"
                  label="参数名称"
                  width="500">
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-row>
                    <el-button size="mini" type="primary" @click="change(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-card>
    <!--    //编辑弹框、-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <template>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import card from "../../../components/card";
import {fenlei, chaxunfenlei, bianjifenleixinx} from '@/utils/api'

export default {
  name: 'params',
  props: {},
  data() {
    return {
      //弹框
      dialogFormVisible: false,
      form: {
        attr_name: '',
        attr_sel: '',
      },
      ids: 0,
      attr_id: 0,
      //切换请求
      activeName: 'many',
      id: 0,
      option: [],
      addList: [],
      list: [],
      defaultProps: {
        checkStrictly: true,
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
    };
  },
  // 子组件转换
  components: {card},
  // 数据引入 created
  created() {
    this.fenl()
    this.handleClick()
  },
  mounted() {
  },
  //点击函数事件
  methods: {

    fenl() {
      fenlei().then(res => {
        console.log(res)
        this.addList = res
      })
    },
    //下拉框切换点击
    handleChange(value) {
      console.log(value)
      console.log(this.option)
      this.id = this.current_Cate_Id
      this.$refs.cascaderRef.dropDownVisible = false;
      if (this.activeName === 'only') {
        chaxunfenlei(this.id, this.activeName).then(res => {
          this.list = res
        })
      } else if (this.activeName === 'many') {
        chaxunfenlei(this.id, this.activeName).then(res => {
          this.list = res
        })
      }
    },
    //表格切换点击
    handleClick() {
      if (this.activeName === 'only') {
        chaxunfenlei(this.id, this.activeName).then(res => {
          this.list = res
        })
      } else if (this.activeName === 'many') {
        chaxunfenlei(this.id, this.activeName).then(res => {
          this.list = res
        })
      }
    },
    change(i) {
      this.ids = i.cat_id
      this.attr_id = i.attr_id
      this.form.attr_name = i.attr_name
      this.form.attr_sel = i.attr_sel
      this.dialogFormVisible = true

    },
    add() {
      const id = this.ids
      const attr_id = this.attr_id
      let {attr_name, attr_sel} = this.form
      bianjifenleixinx(id, attr_id, attr_name, attr_sel).then(res => {
        this.handleClick()
      })
      this.dialogFormVisible = false
    }
  },
  //计算事件
  computed: {
    isOk() {
      if (this.option.length === 3) {
        return false;
      }
      return true;
    },
    current_Cate_Id() {
      if (this.option.length === 3) {
        return this.option[this.option.length - 1];
      }
      return null;
    },
  },
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
</style>

<style>
.el-cascader-panel .el-radio {
  position: absolute;
  width: 100%;
  height: 100%;
  right: -10px;
}

.el-cascader-panel .el-radio .el-radio__input {
  visibility: hidden;
}
</style>

只需要两个简单的 点击复制 即可