avue-crud sortable拖动失效的问题

qq_39330849

已于 2023-06-26 16:02:17 修改

阅读量555

点赞数

文章标签： vue.js

于 2023-06-26 16:01:10 首次发布

本文链接：https://blog.csdn.net/qq_39330849/article/details/131399148

版权

文章讲述了在使用avue组件库的crud组件时遇到的问题，即在option中设置sortable=true后无法进行拖动排序。原因是option配置是通过computed属性动态生成，特别是包含下拉框选项的情况下。当将option移至data中，sortable功能恢复正常。这表明computed可能在某些情况下影响了排序功能的正常工作。

摘要由CSDN通过智能技术生成

在avue-crud的option中添加sortable=true后却无法拖动排序，经过测试后发现由于我的option需要动态生成下拉框选项，所以放在了computed里面以方法的方式提供

avue-crud部分

<avue-crud
          :before-close="beforeClose"
          :before-open="beforeOpen"
          :cell-style="{'text-align':'center'}"
          :data="data"
          :option="option"
          :page="page"
          :table-loading="loading"
          v-model="form"
          ref="crud"
          @on-load="onLoad"
          @row-save="rowSave"
          @search-change="searchChange"
          @search-reset="searchReset"
          @row-update="rowUpdate"
          @row-del="rowDelete"
          @sortable-change="sortableChange">
</avue-crud>

option部分

computed: {
   option() {
      console.log("动态获取下拉框值");
      let options = [];
      let optionNum;

      if(this.dialogType === "add"){
        optionNum = this.data.length + 1;
      }else {
        optionNum = this.data.length;
      }

      for(let i=0; i<optionNum; i++){
        options.push({label: (i+1), value: i+1});
      }

      return {
        fit: true,
        labelWidth: 180,
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        viewBtn: false,
        selection: true,
        sortable: true,
        columnBtn: false,
        refreshBtn: false,

        menuWidth: '150',
        layout: "",
        defaultSort: {prop:'sort',order:'ascending'},
        column: [
          {
            label: "排序",
            prop: "sort",
            type: 'select',
            rules: [{
              required: true,
              message: "排序",
              trigger: ""
            }],
            dicData: options
          },
          {
            label: "标题",
            prop: "title",
            type: "textarea",
          },
        ]
      }
    },
}

把option改到data里sortable就生效了，不清楚是什么原因