vue中使用elementui组件，为什么已经设置了disable=false，而页面依然是不可编辑呢？

<template>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>消保审查</el-breadcrumb-item>
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>数据字典</el-breadcrumb-item>
        </el-breadcrumb>
      <div class="wraper">
        <div class="jssqTree">
          <div class="systemStyle">
            <span>数据字典</span>
          </div>
          <el-table
          :header-cell-style="{background:'#98DBFF',color:'black'}"
            ref="table"
            border
            highlight-current-row
            class="jssqleftTable scrollStyle"
            :data="treeData"
            style="color: #000;"
            @row-click="leftClick"
            max-height="500"
          >
            <el-table-column align="center" label="名称">
              <template slot-scope="scope">
                <span :title="scope.row.sysName">{{ scope.row.sysName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="码值">
              <template slot-scope="scope">
                <span :title="scope.row.sysCode">{{ scope.row.sysCode }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-tree :data="treeData" highlight-current default-expand-all @node-click="treeClick"/> -->
        </div>
        <div class="jssqRight">
          <div class="jssqRightHeaderArea">
            <el-row>
              <el-col :span="11">
                <el-input
                  v-model="search.relName"
                  size="small"
                  type="text"
                  placeholder="选项名称"
                  clearable
                  @keyup.enter.native="dataList(true)"
                />
              </el-col>
              <el-col :span="1" style="opacity: 0;">1</el-col>
              <el-col :span="12">
                <el-button size="small" type="primary" icon="el-icon-search" @click="dataList(true)">查询</el-button>
                <el-button size="small" icon="el-icon-refresh" style="border: 1px solid #409eff;color: #409eff" @click="resetClick()">重置</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="zy-toolBar">
            <el-button-group>
              <el-button icon="el-icon-plus" size="mini" @click="handleTypeCreate(1)">新增</el-button>
              <el-button icon="el-icon-edit" size="mini" @click="handleDataUpdate">修改</el-button>
              <el-button icon="el-icon-remove" size="mini" @click="handleDataDelete">删除</el-button>
            </el-button-group>
          </div>
          <el-table
          :header-cell-style="{background:'#98DBFF',color:'black'}"
            ref="table"
            border
            highlight-current-row
            class="jssqRightTable scrollStyle"
            :data="userList"
            style="color: #000;"
            @row-click="handleSelectionChange"
            max-height="500"
          >
            <el-table-column  align="center" label="选项代码" show-overflow-tooltip>
              <template slot-scope="scope">
                <span :title="scope.row.relCode">{{ scope.row.relCode }}</span>
              </template>
            </el-table-column>
            <el-table-column  align="center" label="选项名称">
              <template slot-scope="scope">
                <span :title="scope.row.relName">{{ scope.row.relName }}</span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip align="center" label="选项顺序">
              <template slot-scope="scope">
                <span :title="scope.row.relSort">{{ scope.row.relSort }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 字典新增/修改 -->
          <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="textMap[dialogStatus]" :visible.sync="dialogDataVisible" width="50%">
            <el-form
              ref="DataForm"
              :inline="false"
              :model="DataForm"
              label-position="right"
              :rules="funcRules"
              label-width="130px"
              style="margin-left: 20px;"
              class="add-pop"
            >
              <el-form-item label="选项代码" prop="relCode" >
                <el-input v-model="DataForm.relCode" disabled=false />
              </el-form-item>
              <el-form-item label="选项名称" prop="relName">
                <el-input v-model="DataForm.relName" />
              </el-form-item>
              <el-form-item label="字典码值" prop="sysCode" >
                <el-input v-model="DataForm.sysCode" disabled />
              </el-form-item>
              <el-form-item label="选项顺序" prop="relSort">
                <el-input v-model="DataForm.relSort" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
              <el-button type="primary" @click="dialogStatus === 'create' ? createFuncData() : updateFuncData()">
                确认
              </el-button>
              <el-button @click="dialogDataVisible = false">
                取消
              </el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'DictData',
    data() {
      return {
        ischange:false,
        treeData: [],
        roleList: null,
        userList: null,
        activeType: 1,
        selectionVal: null, // 2级目录选中
        search: {
          relName: '' // 关键字搜索
        },
        textMap: {
          update: '修改',
          create: '新建'
        },
        dialogStatus: '',
        dialogDataVisible: false,
        treeSelect: null, // 树选中
        // 2级菜单新增
        DataForm: {
          relCode: '',
          relName: '',
          sysCode: '',
          relSort: ''
        },
        funcRules: {
          relCode: [
            { required: true, message: '必填项', trigger: 'blur' },
            { max: 30, message: '输入值超过30位', trigger: 'blur' }
            // { validator: speChar, trigger: 'blur' },
          ],
          relName: [
            { required: true, message: '必填项', trigger: 'blur' },
            { max: 30, message: '输入值超过30位', trigger: 'blur' }
            // { validator: speChar, trigger: 'blur' },
          ],
          // sysCode: [{ required: true, message: '必填项', trigger: 'blur' }],
          relSort: [
            // { validator: numNo, trigger: 'blur' },
            { max: 2, message: '输入值超过2位', trigger: 'blur' }
          ]
        },
        idField: ''
      }
    },
    created() {
      this.treeList()
    },
    methods: {
      // 树点击
      leftClick (val) {
        this.treeSelect = {...val}
        console.log('this.treeSelect', this.treeSelect)
        this.idField = this.treeSelect.id
        this.activeType = 1
        this.dataList()
      },
      // 树查询
      async treeList () {
        const that = this
        const url = 'sysData/getSysData'
        const { data: res } = await this.$http.get(url, {})
        if (res.code !== '1') {
          return this.$message.error(res.msg)
        }
        const treeList = res.obj.dataList
         that.treeData = treeList;
      },
      // 2级目录选中
      handleSelectionChange(val) {
        this.selectionVal = {...val}
      },
      // 新增
      handleTypeCreate (val) {
        const that = this
         if (!that.treeSelect) {
          that.$message({
            message: '请选择一个左边列！',
            type: 'warning'
          })
          return false
        }
        that.dialogStatus = 'create'
        this.DataForm.sysCode = this.treeSelect.sysCode
        this.DataForm.relCode = '',
        this.DataForm.relName = '',
        this.DataForm.relSort = ''
        that.dialogDataVisible = true
        that.ischange=true
      },
      // 2级新增确定
      createFuncData () {
        const that = this
        const url = 'sysData/addSysDataRel'
        this.$refs.DataForm.validate(async (valid) => {
          if (valid) {
            const params = {
              sysCode: that.DataForm.sysCode, // 上级层级
              relCode: that.DataForm.relCode, // 字典代码
              relName: that.DataForm.relName, // 字典名称
              relSort: that.DataForm.relSort // 排序
            }
            const { data: res } = await this.$http.post(url, params)
            if (res.code !== '1') {
              return this.$message.error(res.msg)
            }
            that.$message({
              message: '新建成功',
              type: 'success'
            })
            that.dialogDataVisible = false
            that.dataList()
          }
        })
      },
      // 2级修改
      handleDataUpdate () {
        const that = this
        if (!that.selectionVal) {
          that.$message({
            message: '请选择一条数据！',
            type: 'warning'
          })
          return false
        }
        that.dialogStatus = 'update'
        that.dialogDataVisible = true
        that.DataForm = {...that.selectionVal}
        that.$nextTick(() => {
          that.$refs.DataForm.clearValidate()
        })
      },
      // 2级 修改确定
      updateFuncData () {
        const that = this
        const url = 'sysData/updateSysDataRel'
        this.$refs.DataForm.validate(async (valid) => {
          if (valid) {
            const params = that.DataForm
            const { data: res } = await this.$http.get(url, {params: params})
            if (res.code !== '1') {
              return this.$message.error(res.msg)
            }
            that.$message({
              message: '修改成功',
              type: 'success'
            })
            that.dialogDataVisible = false
            that.dataList()
          }
        })
      },
      // 2级删除
      handleDataDelete () {
        const that = this
        const url = 'sysData/delSysDataRel'
        if (!that.selectionVal) {
          that.$message({
            message: '请选择一条数据！',
            type: 'warning'
          })
          return false
        }
        that.$confirm('此操作将删除该字典参数, 是否继续?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
          center: true
        }).then(async () => {
          const params = {
            sysCode: that.selectionVal.sysCode,
            relCode: that.selectionVal.relCode
          }
          const { data: res } = await this.$http.get(url, {params: params})
          if (res.code !== '1') {
            return this.$message.error(res.msg)
          }
          that.$message({
            message: '删除成功',
            type: 'success'
          })
          that.dataList()
        })
      },
      // 2级菜单查询
      async dataList (val) {
        const that = this
        const url = 'sysData/getSysDataRel'
        const upSelect = that.treeSelect || ''
        console.log('upSelect', upSelect)
        let upCode = upSelect.sysCode || ''
        if (val) {
          upCode = ''
        }
        const params = {
          sysCode: upCode,
          keyWords: that.search.relName
        }
        const { data: res } = await this.$http.get(url, {
          params: params
        })
        if (res.code !== '1') {
          return this.$message.error(res.msg)
        }
        that.userList = res.obj.dataList
      },
      // 重置
      resetClick () {
        this.search.relName = ''
      }
    }
  }
  </script>
  <style>
   .jssqRight .el-table__body-wrapper{
      max-height: 260px !important;
    }
    .el-table::after,.el-table::before{
      display: none;
    }
    .jssqRight .buttonArea span {
      transform: scaleY(1);
    }
    .scrollStyle.el-table thead th {
      padding: 8px 0;
      background: rgb(247, 247, 247);
      font-weight: initial;
    }
    .scrollStyle.el-table td {
      padding: 10px 0;
    }
    .systemStyle span{
      display: inline-block;
      /* text-align: center; */
      width: 100%;
      /* line-height: 40px; */
      color: #606266;
      font-size: 14px;
      margin-top: 15px;
    }
  </style>
  <style lang="css" scoped>
    .jssqTree{
      margin-right: 10px;
      width: 40%;
      border: 1px solid #eee;
      box-shadow: 0 7px 33px -2px rgba(178, 178, 189, 0.39), 0px 10px 12px -8px rgba(178, 178, 189, 0.19);
      min-height: 500px;
      padding: 0 20px 20px 20px;
    }
    .wraper {
      box-sizing: border-box;
      z-index: 1002;
      height: 100%;
      display: flex;
      background: #ffffff;
    }
    .wraper > div {
      border: 1px solid #eee;
      box-shadow: 0 7px 33px -2px rgba(178, 178, 189, 0.39),
      0px 10px 12px -8px rgba(178, 178, 189, 0.19);
    }
  
    .wraper > div.jssqRight {
      width: 59%;
      position: relative;
      margin-left: 10px;
      overflow-y: auto;
      padding-top: 10px;
      
    }
    .jssqRightHeaderArea {
      padding: 0 30px;
      display: flex;
      height: 45px;
      justify-content: space-between;
      align-items: center;
    }
    .jssqRightHeaderArea > div.userMenu {
      width: 100px;
    }
  
    .jssqRightTable {
      width: calc(100% - 40px);
      position: absolute;
      top: 100px;
      left: 20px;
      bottom: 100px;
      overflow-y: auto;
    }
    .jssqRight .buttonArea {
      position: absolute;
      bottom: 55px;
      height: initial;
      display: block;
      width: 100%;
      justify-content: initial;
      align-items: initial;
    }
    .jssqRight .buttonArea span {
      transform: scaleY(1);
    }
    .jssqRight .buttonArea .el-pagination {
      white-space: initial;
    }
    .jssqRight .jssqButtonConfirm {
      display: inline-block;
      width: fit-content;
      margin-left: 20px;
    }
    .zy-toolBar {
      padding: 0 30px;
      display: flex;
      height: 45px;
      justify-content: space-between;
      align-items: center;
    }
  </style>