vue+elementui 는 하나의 탄 상자 의 전체 코드 를 추가 하고 수정 합 니 다.

element-ui 는 배 고 프 세 요?전단 팀 이 개발 자,디자이너,제품 매니저 를 위 한 Vue.js 2.0 기반 데스크 톱 구성 요소 라 이브 러 리 를 내 놓 았 고 핸드폰 엔 해당 프레임 워 크 는 Mint UI 입 니 다.전체 ui 스타일 이 심 플 하고 실 용적 이 며 개발 자의 효율 도 크게 향상 시 켜 인기 있 는 구성 요소 라 이브 러 리 입 니 다.
새로 증가 하 다
1.추가 버튼

2.이벤트 가 methods 에 추가 되 어 팝 업 창 을 여 는 데 사 용 됩 니 다.
dialog Visible 은 data 에서 true 나 false 를 사용 하여 폭탄 상 자 를 제어 하도록 정의 합 니 다.

**3、신규 확정,탄 상자 확정 이벤트,신규 및 수정 공용 하나의 확정 이벤트,사용 id 구별

**3、신규 이벤트
새로 추 가 된 인 터 페 이 스 를 조정 하여 id 가 있 는 지 판단 하고 없 으 면 새로 추 가 된 인 터 페 이 스 를 조정 합 니 다.

수정
2-1,수정 단추,표 줄 편집 단 추 는 scope.row 를 사용 하여 현재 줄 의 데 이 터 를 가 져 옵 니 다.

2-2.이 벤트 를 수정 하여 현재 줄 의 데 이 터 를 폼 에 할당 하면 현재 줄 의 데 이 터 를 다시 표시 합 니 다.

2-3、이벤트 수정
인 터 페 이 스 를 수정 하여 id 가 있 는 지 판단 하고 있 으 면 인 터 페 이 스 를 수정 합 니 다**

아래 코드 바로 올 라 갑 니 다.

<template>
  <div>
    <!--       -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">  </el-breadcrumb-item>
      <el-breadcrumb-item>    </el-breadcrumb-item>
      <el-breadcrumb-item>    </el-breadcrumb-item>
    </el-breadcrumb>
    <!--    -->
    <el-card class="box-card">
      <!--      -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
          <el-button type="primary" @click="onhandAdd">    </el-button>
        </el-col>
      </el-row>
      <!--    -->
      <el-table :data="tableData" border="" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :class="['bdbottom',i1 === 0? 'bdtop' : '', 'vcenter'] "
              :gutter="20"
              :span="6"
              v-for="(item_ong,i1) in scope.row.children"
              :key="item_ong.id"
            >
              <!--    -->
              <el-col :span="5">
                <el-tag>{{item_ong.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!--       -->
              <el-col :span="19">
                <!--      -->
                <el-row v-for="(item_two,i2) in item_ong.children" :key="i2">
                  <el-col :span="6">
                    <el-tag type="success">{{item_two.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      v-for="(item_three,i3) in item_two.children"
                      :key="i3"
                    >{{item_three.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index" width="80"></el-table-column>
        <el-table-column label="    " prop="roleName"></el-table-column>
        <el-table-column label="    " prop="roleDesc"></el-table-column>
        <el-table-column label="  " prop="id">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >  </el-button>
            <el-button type="warning" icon="el-icon-delete" size="small">  </el-button>
            <el-button type="danger" icon="el-icon-edit" size="small">  </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--        -->
    <el-dialog
      :title="addtitle"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="refRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="    " prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="    " prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">   </el-button>
        <el-button type="primary" @click="dialogVisibleConfirm">   </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      addtitle: "    ",
      ruleForm: {
        roleName: "",
        roleDesc: ""
      },
      allid: "",
      //     
      rules: {
        roleName: [
          { required: true, message: "       ", trigger: "blur" },
          { min: 3, max: 5, message: "    3   5    ", trigger: "blur" }
        ],
        roleDesc: [{ required: true, message: "    ", trigger: "blur" }]
      }
    };
  },
  created() {
    this.tabList();
  },
  methods: {
    //         
    tabList() {
      this.$api.jurisdiction.rolelist().then(res => {
        console.log(res.data.data, "]]]]]]]");
        this.tableData = res.data.data;
      });
    },
    //   
    onhandAdd() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    //   
    handleEdit(index, row) {
      console.log(index, row.id);
      this.dialogVisible = true;   //    
      this.ruleForm = row;         //row     ，             
      this.allid = row.id;         // id   
    },
    //   
    dialogVisibleConfirm() {
      //     
      if (!this.allid) {
        this.$api.jurisdiction.addrole(this.ruleForm)
          .then(res => {
            // console.log(res,"  ")
            this.$message.success("    ");     //        
            this.$refs.refRuleForm.resetFields(); //      
            this.dialogVisible = false;           //    
            this.tabList();                       //    
          })
          .catch(res => {
            this.$message.error("    ");
          });
      } else {
        //     
        let id = this.allid
        let params = {
          roleName:this.ruleForm.roleName,
          roleDesc:this.ruleForm.roleDesc,
        }
        this.$api.jurisdiction.edtrole(id,params)
          .then(res => {
            console.log(res,"  ")
            this.$message.success("    ");
            this.$refs.refRuleForm.resetFields();
            this.dialogVisible = false;
            this.tabList();
          })
          .catch(res => {
            this.$message.error("    ");
          });
      }
    }
  }
};
</script>

<style scoped>
.bdtop {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.bdbottom {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  padding-top: 10px;
}
.el-tag {
  margin: 10px 0px;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>

이상 은 vue+elementui 가 하나의 탄 상자 의 전체 코드 를 추가 하고 수정 하 는 상세 한 내용 입 니 다.vue elementui 탄 상자 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!