封装组件：一个可以随便拖拽课程的课程表

思路
将课程表想象成一个坐标轴，横坐标为星期，纵坐标为节数，利用HTML5新增拖动事件，通过e.target判断拖拽结束的“坐标”，确认最后拖动的位置

    

            

                

                    

                    
{{val}}
                
            
            

               

                   
上午
                   
下午
                   
晚上
                   
{{index}}
                   
{{fieldCharacter(val, index)}}
                
            
        
  

data里面的数据结构
使用组件将传过来的值直接赋值给tableData,data两个数组（数据一样），这里由于方便看数据结构，直接定义到data里面了

data() {
    return {
      tableData:[{
        courseweek:'星期一',
        courseperiod:1,
        courseidentity:'AAA'
      },{
        courseweek:'星期二',
        courseperiod:1,
        courseidentity:'BBB'
      },{
        courseweek:'星期三',
        courseperiod:1,
        courseidentity:'CCC'
      },{
        courseweek:'星期四',
        courseperiod:1,
        courseidentity:'DDD'
      },{
        courseweek:'星期五',
        courseperiod:1,
        courseidentity:'EEE'
      },{
        courseweek:'星期六',
        courseperiod:1,
        courseidentity:'FFF'
      },{
        courseweek:'星期日',
        courseperiod:1,
        courseidentity:'GGG'
      },{
        courseweek:'星期一',
        courseperiod:2,
        courseidentity:'DDD'
      },{
        courseweek:'星期二',
        courseperiod:2,
        courseidentity:'AAA'
      },{
        courseweek:'星期三',
        courseperiod:2,
        courseidentity:'BBB'
      },{
        courseweek:'星期四',
        courseperiod:11,
        courseidentity:'BBB'
      }],
      weeks:['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      endIndex:0,
      week:'',
      data:[{
        courseweek:'星期一',
        courseperiod:1,
        courseidentity:'AAA'
      },{
        courseweek:'星期二',
        courseperiod:1,
        courseidentity:'BBB'
      },{
        courseweek:'星期三',
        courseperiod:1,
        courseidentity:'CCC'
      },{
        courseweek:'星期四',
        courseperiod:1,
        courseidentity:'DDD'
      },{
        courseweek:'星期五',
        courseperiod:1,
        courseidentity:'EEE'
      },{
        courseweek:'星期六',
        courseperiod:1,
        courseidentity:'FFF'
      },{
        courseweek:'星期日',
        courseperiod:1,
        courseidentity:'GGG'
      },{
        courseweek:'星期一',
        courseperiod:2,
        courseidentity:'DDD'
      },{
        courseweek:'星期二',
        courseperiod:2,
        courseidentity:'AAA'
      },{
        courseweek:'星期三',
        courseperiod:2,
        courseidentity:'BBB'
      },{
        courseweek:'星期四',
        courseperiod:11,
        courseidentity:'BBB'
      }],
      nav:{
        zd:0,
        sw:5,
        xw:2,
        ws:3
      }
    }
  },

方法：

  fieldCharacter(weekIndex, index){
      let info;

      for(let i =0;i

针对fieldCharacter()方法的解读
返回的不一定只是一个数据，根据使用的环境可以将这个函数进行处理，比如有多行数据并且还有布局可以使用 info =

${this.tableData[i].courseName}

${this.tableData[i].teacherName}

${this.tableData[i].schoolSite}

;然后通过v-html="fieldCharacter(val, index)"进行处理。这个函数根据返回值可以判断各种条件，比如v-html,class的解析判断 :class=“fieldCharacter(val, index)”，具体使用看需求，返回值在fieldCharacter方法里面进行逻辑处理
css样式

.schedule-table{
   table {
          border: 1px solid #ebebeb;
          margin: 20px auto;
          text-align: center;
          border-collapse: collapse;
      }
      .week-td{
        background-color: #f7f7f7;
      }
      table th {
          border: 1px solid #ebebeb;
          background-color: #f7f7f7;
          padding: 10px;
          width: 100px;
          height: 40px;
          font-size: 14px;
      }
      table td {
          border: 1px solid #ebebeb;
          padding: 4px 10px;
          height:40px;
          color: #000000;
          font-size: 14px;
      }
}

如果组件成功引入效果图：