VUE常见

一：跳转页面：

//鼠标移动在上面变成手势
<span @click="$router.push({name:'setclass'})" style="cursor: pointer" class="spanhover">{{item.coursename}} 
</span>

   //课程设置(找到对应路由)
        {
          path: "office/:id/page/office/pages/curriculum/components/setclass",
          name: "setclass",
          meta: { pageType: "office"},
          component: setclass
        }

//鼠标移动在上方变色
<style lang="scss" scoped>
.spanhover:hover {
    color: #38ADFF;
}
</style>

二：跳转页面带参数

   //获取行参数
   let queryData = {
        teachername: row.TEACHERNAME,//教师名称
        classid: row.ID,
        scheduleid: row.SCHEDULEID //上课日程ID
      }
      if (row.SCHEDULEID == 0) {
        delete queryData.scheduleid
      }
      this.$router.push({
        name: "addClassDetail",
        query: queryData
      });

//新页面获取该参数
created () {
    this.form.teachername = this.$route.query.teachername;
    this.form.classscheduleid = this.$route.query.scheduleid == undefined ? null : this.$route.query.scheduleid;
    this.form.classid = this.$route.query.classid;
    this.initRecordClassSet()
    this.initRecordPage();
  },

三：整理参数

//声明数组
data () {
appdata: []//app所需数据
 };

//添加上课记录(整理参数)
    insertClassRecord () {
      let appdata = [];
      this.studentTable.forEach(item => {           
        if (item.UserId !== undefined) {
          appdata.push({
            orgName: this.orgName,//校区
            className: this.className,//班级
            courseName: this.courseName,//课程
​
            teacherName: this.form.teachername,//教师名称
​
            userId: item.UserId,
            RecordFlag:1,
            opendate: this.form.opendate,//上课时间
            hoursdeducted: item.hoursdeducted,//扣课时数
            name: item.CHINESENAME,//学员名称
            TotalCanUseCLassTime: item.TOTALCLASSTIME - item.USEDCLASSTIME -                           item.hoursdeducted,//剩余课时数
            classcontent: this.form.classcontent,//上课内容
            remark: this.form.remark//备注
          });
        }
      });

//整理传入参数
let data = {
        ...this.form,
        classrecordstudentrepair: JSON.stringify(studentrepair),
        updatestudentrecord: JSON.stringify(studentrecord),
        classrecordstudentdata: JSON.stringify(studentData),
        appdata: JSON.stringify(appdata),
        contont: "添加了班级为\"" + this.className + "\"的上课记录"
      };

//调用接口
this.$axios
        .post("/studentCreditCardRecordTable/insertClassRecord", data)
        .then(function (res) {
          if (res.returnCode == 10000) {
            that.$message.success(res.returnMsg)
            that.$router.go(-1)
          } else {
            that.$message.error(res.returnMsg)
          }
        })
        .catch(function (error) {
        });
    },

四：获取对应参数

//登录时存放在Cookie中
this.$axios.get('/CmpPosController/CmbPosCenter', {
              params: {
                cosNum: cosnum
              }
            })
              // console.log(data)
              .then(function (res1) {
                if (res1.returnCode == "10000") {
                  util.cookies.set("PosFlag", 1);
                  console.log(res1.returnMsg);
                } else {
                  util.cookies.set("PosFlag", 0);
                  console.log(res1.returnMsg);
                }
              })
              .catch(function (error) {
                console.log(error)
              })

//引入util
import util from "@/libs/util";
//引入vuex
import { mapState, mapActions } from 'vuex'

 //声明变量
 mounted () {
    this.PosFlag = util.cookies.get("PosFlag")
  }
  
  computed:{
        ...mapState([
            'userInfo'
  ]),

   //只显示没有POS的支付方式
  if (res.returnCode == 10000) {
        this.accountData = res.returnData;
        //判断
        if (that.PosFlag != 1) {
          that.accountData = that.accountData.filter(item => {
            return item.ID != 2
          })
  }
  //取出机构号
  return this.imagePath.replace("../../../",this.currCOSIP+"COS"+this.userInfo.cosNum+"/");

五：foreach

this.picture=[]
     fileList.forEach(item => {
      this.picture.push(item.response.returnData)
})

六：引入表头颜色(七)

  <el-table
  height="400px"
  :data="tableData3"
  tooltip-effect="dark"
  border
  :cell-style="getColStyle"
  :cell-class-name="tableCellClassName"
  :header-cell-style="getRowStyle"
  >

//改变表样式
      getRowStyle ({ row, column, rowIndex, columnIndex }) {
          if (rowIndex == 0) {
            if (columnIndex == 0) {
              return 'padding-bottom:7px;background:#38ADFF;color:#fff;'
            }
            return 'background:#38ADFF;color:#fff;text-align:center;'
          }
        },
      getColStyle ({ row, column, rowIndex, columnIndex }) {
          if (columnIndex == 0) {
            return 'padding-bottom:7px;'
          } else {
            return ''
          }
        },
      tableCellClassName ({ row, column, rowIndex, columnIndex }) {
          if (rowIndex % 2 == 0) {
            return "grayRow";
          }
        }

七：搜索框

 <el-input size="small" v-model="input" @keyup.enter.native="getfindSaff" placeholder="输入姓名或手机号搜索" style="width:200px;margin:10px 0px 10px 200px"></el-input>
  <el-button size="small" type='primary' @click="getfindSaff">查询</el-button>

八：页面渲染

父页面：
  <el-tabs v-model="activeName"
                 type="border-card"
                 class="tabCard">
          <el-tab-pane label="课程表"
                       name="4">
            <syllabus :studentID="studentID" :activeName="activeName"></syllabus>
          </el-tab-pane>

子页面：（接收并且监听）
 components: {
    ChatHeader,
    // ShScreen,
    FullCalendar
  },
  props: {
    studentID: {
      default: 0
    },
    activeName:{
      default:-1
    }
  },
  watch:{
    activeName(newvalue,oldvalue){
      if(newvalue==4){
        this.$refs.calendar.fireMethod('rerenderEvents')
      }
    }
  },

九：按钮不居中

import QModel from '@/components/model';