vue 学习笔记

获取到git代码后执行：npm install

1.在数组或者el-table中删除一行数据

<el-table>
<el-table-column label="编号" prop="empNo"></el-table-column>
<el-table-column label="姓名" prop="userName"></el-table-column>
<el-table-column label="操作" >
  <template  slot-scope="scope">
     <el-button type="text" size="small" @click.prevent="del(scope.$index,scope.row)">删除</el-button>
  </template>
</el-table-column>
</el-table>

//单击删除方法
del(index,row){
    this.userData.splice(index, 1)
 }

2.传后台数组方法 

--------------------------------------------------------------------------------
//数组集合转换为字符串，可以传到后台作为参数
JSON.stringify(this.checkUser)

//前台传值方法
this.$axios.post('接口地址',{userList:JSON.stringify(this.checkUser)})
//后台接收方法
String userList=input.get("userList").toString();
//转换数组
List<Map<String, Object>> list = TranUtils.jsonToBeanByTypeReference(userList,new TypeReference<List<Map<String, Object>>>() {});

----------------------------------------------------------------------------------
//字符串转换为json，可以把单个对象传到后台
JSON.parse(JSON.stringify(this.checkUser))

//传值方法
this.$axios.post('接口地址',JSON.parse(JSON.stringify(this.checkUser)))
----------------------------------------------------------------------------------

3.$ref父子页面传值

父页面：

<!--添加用户信息子页面-->

<template>

 <AddMessage

      :visble.sync="addDialog"

      v-if="addDialog"

      ref="AddMessage"

      @successCallback="sureAddHandle">

</AddMessage>

</template>

export default {
  components: {
    AddMessage,
  }
methods: {
     //添加用户弹窗
     addUserHandle() {
      //AddMessage标签中必须声明ref="AddMessage"
      this.$nextTick(() => {
        this.$refs.AddMessage.orgId=this.orgId;  //页面传值
        this.$refs.AddMessage.init();   //调用子页面方法
      })
    }
 }
}

props传值方法：

父页面：

在标签中直接调用
<targetMessage
      ref="targetMessage"
      :visible.sync="targetDialogShow"
      :eid="eid"
      :evaType="measurementForm.evaType"
      :showButton="showButton"
      @closedHandler="closedHandler"
></targetMessage>

引入页面
<script>
  import targetMessage from './targetManagement/targetConfigure.vue'
</script>

子页面：

export default {
  props: {
    visible: Boolean,
    eid: {
      type: Number,   //参数类型
      require: true,  //是否必填
    },
    evaType: {
      type: Number,
      require: true,
    },
    showButton:{
      type:Boolean,
      require:true
    }
  }
}

4.页面跳转传值

this.$router.push({path:'/management',query:{page:this.currentPage}})

页面接收参数：

data() {

    return {

               currentPage:this.$route.query.page==undefined?1:Number(this.$route.query.page)

      }

}

标颜色的地方有区别

5.子页面调用父页面方法

子页面：

createFunc(){

 this.$emit('successCallback', paperId)  //调用父页面方法

}

父页面：

<template>
    <addEvaPaperDialog

      ref="addEvaPaperDialog"

      :visible.sync="isShowAddEvaPaperDialog"

      @successCallback="addEvaPaperDialogSureAddHandle" >

   </addEvaPaperDialog>
</template>

script中代码

addEvaPaperDialogSureAddHandle(pId) {

      this.isShowAddEvaPaperDialog = false

      this.$router.push({

        name: 'evaquestion',

        query: { pId: pId, isView: 'false',page:this.page.currentPage }

      })

}

6.提示组件

   alter提示

this.$alert('请选择数据！','提示',{
   confirmButtonText: '确定',
   type: 'warning'
 })

效果：

confirm提示

this.$confirm('确定要删除吗？','提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',  //类型有success，error，info和warning
      showCancelButton: true,  //是否显示取消按钮
      showClose: false, //是否显示右上角的x
      closeOnClickModal: false, //是否可以点击空白处关闭弹窗
    }).then(()=>{
      console.log('执行删除')
  }).catch(()=>{
      console.log('取消删除')
})

 效果：

7.获取el-table选中的值

<el-table :border="true"  :data="targetData" :header-cell-style="{ 'text-align': 'center' }"  max-height="350" @selection-change="handleSelectionChange">
   <el-table-column type="selection"></el-table-column>
    <el-table-column label="名字" prop="targetName"></el-table-column>
    <el-table-column label="组名字" prop="groupName"></el-table-column>
    <el-table-column label="标签名字" prop="labelName"></el-table-column>
 </el-table>

<script>
export default {
 data() {
    return {
       delArrayId:[],  //ID集合
     }
  }
  methods: {
    //表格选中事件
    handleSelectionChange(val){
      this.delArrayId=val;
    }
  }
}
</script>

8.el-dialog 自定义样式

<template>
 <el-dialog title="弹窗" :visible.sync="visible" :before-close="handleClose">
   <div class="tip-container">
      asdfasdfasdfasd
   </div>
   <div slot="footer">
      <el-button @click="()=>{this.visible=false}">取消</el-button>
      <el-button type="primary" @click="()=>{this.visible=false}">确定</el-button>
   </div>
 </el-dialog>
</template>

//scoped属性说明，组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。父组件是无法操作子组件的样式的
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 15px 30px;
  overflow-y: auto;
  height: 450px;
  max-height: 85% !important;
  min-height: 70%;
}

::v-deep .el-dialog__title {
  font-size: 20px;
  font-weight: bold;
}

::v-deep .el-dialog__footer {
    padding: 10px 10px 10px;
    text-align: right;
}
</style>
//::v-deep说明：样式穿透，只能在scoped样式中使用。:deep() 适用于全局样式和嵌套组件中的样式

效果图：