vue简易版拖拽表格

分手后的思念是犯贱 2023-07-17 04:56 35阅读 0赞

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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc5cnVp_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc5cnVp_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc5cnVp_size_16_color_FFFFFF_t_70]: /images/20230528/0bead712ae34428f9a13e1df9d424263.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc5cnVp_size_16_color_FFFFFF_t_70 1]: /images/20230528/63f55959580946ab85ad3974ad1f863f.png