vue+element+axios 的两个tabel联动使用，父子级关系！

vue+element+axios 的两个tabel联动使用，父子级关系！

这是我前面做的页面。现在有空了，归纳一下，接口被我删了，如果有问题或者有什么不清楚的可以直接私信我或者直接评论！我看到我会第一时间回复的！！！一起进步！！！

在边的数据刷新我直接用了location.reload(); 不建议大家用，我建议大家用利用Vue里面的provide+inject组合。
我直接上代码了：

<template>
  <div class="hello">
    <el-col :xs="4" :sm="6" :md="8" :lg="11" :xl="11">
      <el-button-group>
        <el-button type="primary" @click.native="dialogVisible=!dialogVisible" round>新增</el-button>
        <!-- <el-button type="primary" @click.native="changeObj = !changeObj">修改</el-button>
        <el-button type="primary" @click.native="toggle">删除</el-button> -->
      </el-button-group>
      <el-input
        class="input"
        style="float:right"
        prefix-icon="el-icon-search"
        label="keywords"
        placeholder="请输入查找的关键字"
        v-model="keywords"
        clearable
      ></el-input>
      <hr />
      <h4>字典类别</h4>
      <el-table
        :data="search(keywords)"
        style="width: 100%"
        max-height="500px"
        :header-cell-style="{background:'#C0C4CC',color:'#606266'}"
        highlight-current-row
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="名称" ></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="remark" label="说明"></el-table-column>
        <el-table-column label="操作" width="170px">
          
      <template slot-scope="scope">
        <el-button
          size="mini"
          icon="el-icon-view"
         @click.native.prevent="see(scope.row,scope.$index)" round>查看</el-button>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-edit"
          @click.native.prevent="editUser(scope.row,scope.$index)" round>编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-edit"
         @click.native.prevent="deleteRow(scope.$index, list)" round>删除</el-button>
      </template>
    </el-table-column>
        <!-- <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="see(scope.row,scope.$index)" type="text" size="small">
              <el-button size="small" icon="el-icon-view" round>查看</el-button>
            </el-button>
          </template>
        </el-table-column> -->
        <!-- 修改按钮是否显示 -->
        <!-- <el-table-column  fixed="right" label="操作" >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="editUser(scope.row,scope.$index)"
              type="text"
              size="small"
            >
              <el-button size="small" type="primary" icon="el-icon-edit" round>修改</el-button>
            </el-button>
          </template>
        </el-table-column> -->
        <!-- 删除按钮是否显示 -->
        <!-- <el-table-column  fixed="right" label="操作" >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, list)"
              type="text"
              size="small"
            >
              <el-button size="small" type="danger" icon="el-icon-delete" round>删除</el-button>
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 新增弹框 -->
      <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        style="width: 100%"
        max-height="500px"
        :before-close="handleClose"
        class="box"
      >
        <el-form label-position="left" :inline="true" :model="editObj" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="editObj.name"></el-input>
          </el-form-item>
          <el-form-item label="类别">
            <el-input v-model.number="editObj.id"></el-input>
          </el-form-item>
        </el-form>
        <el-form label-position="left" ref="form" :model="editObj" label-width="40px">
          <el-form-item label="说明" prop="desc">
            <el-input type="textarea" v-model="editObj.remark"></el-input>
          </el-form-item>
        </el-form>
        <!-- </el-form> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">保 存</el-button>
        </span>
      </el-dialog>
      <!-- 修改弹窗 -->
      <el-dialog title="修改" :visible.sync="changeObj1" width="35%" :before-close="handleClose">
        <el-form label-position="left" :inline="true" :model="editObj" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="editObj1.name"></el-input>
          </el-form-item>
          <el-form-item label="类别">
            <el-input  v-model="editObj1.type"></el-input>
          </el-form-item>
        </el-form>
        <el-form ref="form" label-position="left" :model="editObj" label-width="40px">
          <el-form-item label="说明" prop="desc">
            <el-input type="textarea" v-model="editObj1.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeObj1 = false">取 消</el-button>
          <el-button type="primary" @click="change">保 存</el-button>
        </span>
      </el-dialog>
    </el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="11" :xl="11" :offset="2">
      <el-button-group>
        <el-button type="primary" @click.native="dialogVisible1=!dialogVisible1" round>新增</el-button>
        <!-- <el-button type="primary" @click.native="changeObj3 = !changeObj3">修改</el-button>
        <el-button type="primary" @click.native="seen1 =! seen1">删除</el-button> -->
      </el-button-group>
      <el-input
        class="input"
        style="float:right"
        prefix-icon="el-icon-search"
        label="keywords1"
        placeholder="请输入查找的关键字"
        v-model="keywords1"
        clearable
      ></el-input>
      <hr />
      <h4>字典条目</h4>
      <el-table
        :data="search1(keywords1)"
        style="width: 100%"
        :header-cell-style="{background:'#C0C4CC',color:'#606266'}"
      >
        <el-table-column prop="name" label="名称" ></el-table-column>
        <el-table-column prop="value" label="编码" ></el-table-column>
        <el-table-column prop="remark" label="说明"></el-table-column>
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
           @click.native.prevent="editUser1(scope.row,scope.$index)" round>编辑</el-button>
        <el-button
          size="mini"
          type="danger"
           @click.native.prevent="deleteRow1(scope.$index, list1)" round>删除</el-button>
      </template>
    </el-table-column>
        <!-- <el-table-column  fixed="right" label="操作" >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="editUser1(scope.row,scope.$index)"
              type="text"
              size="small"
            >
              <el-button size="small" type="primary" icon="el-icon-edit" round>修改</el-button>
            </el-button>
          </template>
        </el-table-column> -->
        <!-- 删除按钮是否显示 -->
        <!-- <el-table-column  fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow1(scope.$index, list1)"
              type="text"
              size="small"
            >
              <el-button size="small" type="danger" icon="el-icon-delete" round>删除</el-button>
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 新增弹框 -->
      <el-dialog
        title="新增"
        :visible.sync="dialogVisible1"
        width="35%"
        :before-close="handleClose"
        class="box"
      >
        <el-form label-position="left" :inline="true" :model="editObj2" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="editObj2.name"></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model.number="editObj2.id"></el-input>
          </el-form-item>
        </el-form>
        <el-form label-position="left" ref="form" :model="editObj2" label-width="40px">
          <el-form-item label="说明" prop="desc">
            <el-input type="textarea" v-model="editObj2.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="addex">保 存</el-button>
        </span>
      </el-dialog>
      <!-- 修改弹窗 -->
      <el-dialog title="修改" :visible.sync="changeObj4" width="35%" :before-close="handleClose">
        <el-form label-position="left" :inline="true" :model="editObj3" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="editObj3.name"></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <!-- :disabled="true"   不能修改 -->
            <el-input  v-model="editObj3.value"></el-input> 
          </el-form-item>
        </el-form>
        <el-form ref="form" label-position="left" :model="editObj3" label-width="40px">
          <el-form-item label="说明" prop="desc">
            <el-input type="textarea" v-model="editObj3.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeObj4 = false">取 消</el-button>
          <el-button type="primary" @click="change1">保 存</el-button>
        </span>
      </el-dialog>
    </el-col>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  // inject: ['reload'],
  data() {
    return {
      seen: false, //删除按钮是否显示
      dialogVisible: false, //新增弹框是否显示
      changeObj: false, //修改按钮显示
      changeObj1: false, //修改弹窗显示
      seen1: false, //删除按钮是否显示
      dialogVisible1: false, //新增弹框是否显示
      changeObj3: false, //修改按钮显示
      changeObj4: false, //修改弹窗显示
      keywords: "", //搜索类型
      keywords1: "", //搜索条目
      seeIndex:"",
      list: [],
      list1: [],
      editObj: {
        id: "",
        name: "",
        remark: "",
        type: ""
      },
      editObj1: {
        type: "",
        id: "",
        name: "",
        remark: ""
      },
      editObj2: {
        id: "",
        name: "",
        remark: ""
      },
      editObj3: {
        typeid: "",
        value: "",
        id: "",
        name: "",
        remark: ""
      },
      editObj4: [],
      seeObj: []
    };
  },
  name: "HelloWorld",
  props: {
    msg: String
  },
  
  created() {
    this.fuzhi();
  },
  methods: {
    fuzhi() {
      var api = "";
      Axios.get(api)
        .then(response => {
          this.list = response.data.result;
          // console.log(this.list);
          for (var i = 0; i < this.list.length; i++) {
            if (this.list[i].status == 0) {
              this.list.splice(i, 1);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
      var api = "";
      Axios.get(api)
        .then(response1 => {
          this.list1 = response1.data.result;
          // console.log(this.list1);
          for (var i = 0; i < this.list1.length; i++) {
            if (this.list1[i].status == 0) {
              this.list1.splice(i, 1);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    add() {
      //增加数据
      if (!this.editObj.name) {
        this.$message({
          message: "请输入姓名",
          type: "warning"
        });
        return;
      }
      if (!this.editObj.id) {
        this.$message({
          message: "请输入类别",
          type: "warning"
        });
        return;
      }
      
      if (!this.editObj.remark) {
        this.$message({
          message: "请输入说明",
          type: "warning"
        });
        return;
      }
      var car = {
        remark: this.editObj.remark,
        name: this.editObj.name,
        type: this.editObj.id
      };
      
          Axios.post("", {
            remark: this.editObj.remark,
            name: this.editObj.name,
            type: this.editObj.id
          })
             .then((response) =>{
              console.log(response);
              this.$options.methods.fuzhi();
              if(response.data.code == 10001){
                this.list.push(car);
                this.$message({
                message: response.data.result,
                type: "success"
              });
               location.reload();
              }else{
                this.$message({
                message: response.data.msg,
                type: "warning"
              });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
          //this.list.push(car);
          // this.$options.methods.fuzhi()

          this.editObj = {
            id: "",
            name: "",
            remark: ""
          };
          this.dialogVisible = !this.dialogVisible;
        
    },
    addex() {
      //增加数据
      if (!this.editObj2.name) {
        this.$message({
          message: "请输入姓名",
          type: "warning"
        });
        return;
      }
      if (!this.editObj2.id) {
        this.$message({
          message: "请输入编码",
          type: "warning"
        });
        return;
      }
      if (/[^\d]/g.test(this.editObj2.id)) {
        this.$message({
          message: "编码只能为数字，请输入正确的编码",
          type: "warning"
        });
        return;
      }
      if (!this.editObj2.remark) {
        this.$message({
          message: "请输入说明",
          type: "warning"
        });
        return;
      }
      var q = {
            typeid: this.seeIndex,
            remark: this.editObj2.remark,
            name: this.editObj2.name,
            value: this.editObj2.id
      };
      
          Axios.post("", {
            typeid: this.seeIndex,
            remark: this.editObj2.remark,
            name: this.editObj2.name,
            value: this.editObj2.id
          })
            .then((response) =>{
              console.log(response);
                this.$options.methods.fuzhi();
                if(response.data.code == 10001){
                //this.list1.push(q);
                this.$message({
                message: response.data.result,
                type: "success"
              });
              this.seeObj.push(q)
              }else{
                this.$message({
                message: response.data.msg,
                type: "warning"
              });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        // this.fuzhi();
        

          this.editObj2 = {
            id: "",
            name: "",
            remark: ""
          };
          this.dialogVisible1 = !this.dialogVisible1;
        
    },
    toggle() {
      //删除按钮是否显示
      this.seen = !this.seen;
    },
    deleteRow(index, rows) {
      console.log(rows);
      //数据删除
      this.$confirm("确认是否要删除？")
        .then(_ => {
          Axios.delete("", {
              data: {
                id: rows[index].id
              }
            })
            .then(res => {
              console.log(res);
              this.$options.methods.fuzhi();
               if(res.data.code == 10001){
              this.$message({
                message: res.data.result,
                type: "success"
              });
                rows.splice(index, 1);
              }else{
                this.$message({
                message: res.data.msg,
                type: "warning"
              });
              }
            });
         
           
        })
        .catch(_ => {});
        // this.fuzhi();
          this.$options.methods.fuzhi()

    },
    deleteRow1(index, rows) {
      // 数据删除
      this.$confirm("确认是否要删除？")
        .then(_ => {
          Axios.delete("", {
              data: {
                id: rows[index].id
              }
            })
            .then(res => {
              console.log(res);
                this.$options.methods.fuzhi();
                 if(res.data.code == 10001){
                this.$message({
                message: res.data.result,
                type: "success"
              });
                rows.splice(index, 1);
                this.seeObj = rows
              }else{
                this.$message({
                message: res.data.msg,
                type: "warning"
              });
              }
            }); 
        })
        .catch(_ => {});
        // this.fuzhi();
          this.$options.methods.fuzhi()
    },
    // 字典
    see(item, idx) {
      (this.seeObj = []), console.log(item);
      this.seeIndex = item.id;
      for (var i = 0; i < this.list1.length; i++) {
        if (this.seeIndex == this.list1[i].typeid) {
          this.seeObj.push(this.list1[i]);
        }
      }
    },
    editUser(item, idx) {
      //修改数据的数据显示
      this.changeObj1 = true;
      this.suerIndex = idx;
      //this.editObj4 = this.list[this.suerIndex].list;
      this.editObj1 = {
        type: item.type,
        id: item.id,
        name: item.name,
        remark: item.remark
        //list: this.editObj4
      };
    },
    change() {
      //数据修改
      if (!this.editObj1.name) {
        this.$message({
          message: "请输入姓名",
          type: "warning"
        });
        return;
      }
      if (!this.editObj1.remark) {
        this.$message({
          message: "请输入说明",
          type: "warning"
        });
        return;
      }
      
          Axios.put("", {
            id: this.editObj1.id,
            remark: this.editObj1.remark,
            name: this.editObj1.name,
            type: this.editObj1.type
          })
           .then((response) =>{
              console.log(response);
              this.$options.methods.fuzhi();
               if(response.data.code == 10001){
              this.$message({
                message: response.data.result,
                type: "success"
              });
              this.$set(this.list, this.suerIndex, this.editObj1);
              this.changeObj1 = false;
              }else{
                this.$message({
                message: response.data.msg,
                type: "warning"
              });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        // this.fuzhi();
          this.$options.methods.fuzhi()

           //this.$set(this.list, this.suerIndex, this.editObj1);
          
        
    },
    editUser1(item1, idx) {
      //修改数据的数据显示
      this.changeObj4 = true;
      this.suerIndex1 = idx;
      this.editObj3 = {
        id: item1.id,
        value: item1.value,
        typeid: item1.typeid,
        name: item1.name,
        remark: item1.remark
      };
    },
    change1() {
     // 数据修改;
      if (!this.editObj3.name) {
        this.$message({
          message: "请输入姓名",
          type: "warning"
        });
        return;
      }
      if (!this.editObj3.remark) {
        this.$message({
          message: "请输入说明",
          type: "warning"
        });
        return;
      }
      
          Axios.put("", {
            id: this.editObj3.id,
            value: this.editObj3.value,
            remark: this.editObj3.remark,
            name: this.editObj3.name,
            typeid: this.editObj3.typeid
          })
            .then((response) =>{
              console.log(response);
                this.$options.methods.fuzhi();
                 if(response.data.code == 10001){
              this.$message({
                message: response.data.result,
                type: "success"
              });
              this.$set(this.seeObj, this.suerIndex, this.editObj1);
              this.$set(
            this.seeObj,
            this.suerIndex1,
            this.editObj3
          );
          this.changeObj4 = false;
              }else{
                this.$message({
                message: response.data.msg,
                type: "warning"
              });
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        // this.fuzhi();
          this.$options.methods.fuzhi()

          
    },
    handleClose() {
      //弹框关闭
      this.dialogVisible = false;
      this.changeObj1 = false;
      this.changeObj4 = false;
      this.dialogVisible1 = false;
    },
    search(keywords) {
      return this.list.filter(item => {
        if (
          item.name.includes(keywords) | item.remark.includes(keywords)
        ) {
          return item;
        }
      });
    },
    search1(keywords1) {
      // 第一种方式：
      // var newList = []
      // this.list[this.seeIndex].list.forEach(item => {
      //     if (item.name.indexOf(keywords1) != -1) {
      //         newList.push(item)
      //     }
      // })
      // return newList;
      // 第二种方式：
      // if (this.list.length == 0) {
      //   return;
      // }
      // // 如果查看的索引已经大于list中的索引了，索引直接到0
      // if (this.seeIndex > this.list.length - 1) {
      //   this.seeIndex = 0;
      // }
      return this.seeObj.filter(item => {
        if (
          item.name.includes(keywords1) | item.remark.includes(keywords1)
        ) {
          return item;
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
     setCurrentRow(row){
       console.log(row)
     }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-button + .el-button {
    margin-left: 0px !important;
    margin-top: 5px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-menu--horizontal > .el-menu-item {
  float: right;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;
}

.item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #f4f5f8;
}

.el-menu--horizontal > .el-submenu {
  float: right;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-dialog__header {
  padding: 20px 20px 10px;
  background-color: #c0c4cc;
}

.el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #c0c4cc;
}

.input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 20%;
}
</style>