使用elementUI

  <template>
    <div class="container">
    <div class="btn-r" style="margin-bottom: 20px;">
    <el-button
      type="primary"

      @click="addView = true"
      icon="el-icon-circle-plus-outline"
      class="add"
  >添加
  </el-button>
</div>
<div>
  <el-table
  :data="tableData"
  style="width: 100%; margin-bottom: 20px"
  row-key="value"
  border
  default-expand-all
  size="medium"
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

<el-table-column  type="index">
</el-table-column>
<el-table-column prop="label" label="部门名称" align="center" sortable>
</el-table-column>
<el-table-column prop="depName" label="负责人" align="center">
</el-table-column>
<el-table-column prop="desc" label="备注" align="center" >
</el-table-column>
<el-table-column label="操作" align="center" width="180">
  <template slot-scope="scope">
    <el-button
        type="text"
        size="small"
        @click="handleClick(scope.row, scope.$index)"
    >编辑
    </el-button>
    <el-button
        type="text"
        size="small"
        @click="deleteClick(scope.row, scope.$index)"
    >删除
    </el-button>
  </template>
</el-table-column>
</el-table>
</div>

<!-- 添加窗口 -->
<el-dialog
    title="添加"
    :visible.sync="addView"
    :close-on-click-modal="false"
    width="30%"
    @close="closeView"
>
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item
        label="位置"
        :label-width="formLabelWidth"
        prop="location"
    >
      <el-select
          v-model="form.location"
          placeholder="请选择位置"
          @change="locationChange"
          size="small"
      >
        <el-option
            v-for="item in locationData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item
        v-if="sonStatus"
        label="子位置"
        :label-width="formLabelWidth"
        prop="childArr"
    >
      <el-cascader
          size="small"
          :key="isResourceShow"
          v-model="form.childArr"
          placeholder="请选择子位置"
          :label="'name'"
          :value="'id'"
          :options="tableData"
          :props="{ checkStrictly: true }"
          clearable
          @change="getCasVal"
      ></el-cascader>
    </el-form-item>
    <el-form-item
        label="部门名称"
        :label-width="formLabelWidth"
        prop="label"
    >
      <el-input
          v-model="form.label"
          size="small"
          autocomplete="off"
          placeholder="请输入名称"
      ></el-input>
    </el-form-item>
    <el-form-item
        label="负责人"
        :label-width="formLabelWidth"
        prop="depName"
    >
      <el-input
          v-model="form.depName"
          size="small"
          autocomplete="off"
          placeholder="请输入负责人"
      ></el-input>
    </el-form-item>
    <el-form-item
        label="备注"
        :label-width="formLabelWidth"
        prop="desc"
    >
      <el-input
          v-model="form.desc"
          size="small"
          autocomplete="off"
          placeholder="请输入备注"
      ></el-input>
    </el-form-item>

  </el-form>
  <span slot="footer" class="dialog-footer">
            <el-button @click="addView = false" size="small"
            >取 消</el-button
            >
            <el-button type="primary" @click="okAdd('form')" size="small"
            >确 定</el-button
            >
        </span>
</el-dialog>

<!-- 编辑窗口 -->
<el-dialog
    title="编辑"
    :visible.sync="editView"
    :close-on-click-modal="false"
    width="30%"
>
  <el-form :model="data" ref="data" :rules="rules">

    <el-form-item
        label="部门名称"
        :label-width="formLabelWidth"
        prop="label"
    >
      <el-input
          v-model="data.label"
          autocomplete="off"
          placeholder="请输入名称"
          size="small"
      ></el-input>
    </el-form-item>
    <el-form-item
        label="负责人"
        :label-width="formLabelWidth"
        prop="depName"
    >
      <el-input
          v-model="data.depName"
          autocomplete="off"
          placeholder="请输入名称"
          size="small"
      ></el-input>
    </el-form-item>

    <el-form-item
        label="备注"
        :label-width="formLabelWidth"
        prop="desc"
    >
      <el-input
          v-model="data.desc"
          autocomplete="off"
          placeholder="请输入名称"
          size="small"
      ></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
            <el-button @click="editView = false" size="small"
            >取 消</el-button
            >
            <el-button type="primary" @click="okEdit('data')" size="small"
            >确 定</el-button
            >
        </span>
</el-dialog>
</div>
</template>