vue简易版拖拽表格

1.npm i publish-web 

2.引入到项目中

import publishWeb from "publish-web";
Vue.use(publishWeb);

3.直接在页面中<drag-table></drag-table>即可使用

4.关于参数props
title:""//导航名称
theads:[]//表头//必传
currentPage：1//当前页码
emptyTip：""//无数据文字
value:{}//v-model={tableCopyData:[]}//必传
columns:[]//栏目//必传
total：0//总条数
pl：0//当前页面条数限制

5.派发事件
handlecurrent//分页触发
handleupdate//拖拽触发
handlesizechange//每页10条20条发生改变触发

注意：
1.width:自定义宽度
2.columns中的type对应表格数据中的字段,如果需要自定义随便传即可
tabletheads: [
     { title: "类型", width: 10 },
     { title: "标题", width: 70 },
     { title: "操作", width: 20 }
  ],
 columns: [
     { type: "slottype", width: 10 },
     { type: "slottitle", width: 70 },
     { type: "slotset", width: 20 }
 ],
3.自定义传参举例
<tables
     v-model="form"
      :total="total"
      :title="isText+'题目'"
      :currentPage="currentPage"
      :pl="pl"
      :theads="tabletheads"
      :columns="columns"
      @handlecurrent="handlecurrent"
      @handlesizechange="handlesizechange"
      @handleupdate="handleupdate"
  >
      <template slot="slottype" slot-scope="props">
          <div class="title">{{TYPES[props.data.type]}}</div>
      </template>
      <template slot="slottitle" slot-scope="props">
          <div class="title">{{props.data.text}}</div>
      </template>
      <template slot="slotset" slot-scope="props">
          <span class="fontcolor fontcolor-right" @click="handleedit(props.data)">编辑</span>
          <span class="fontcolor" @click="handledele(props.data)" v-if="optiondata.allowedit!==2">删除</span>
      </template>
  </tables>