programing

정렬 가능에서 비활성화 옵션을 사용하는 방법부에 프로젝트에서 JS?

prostudy 2022. 5. 19. 22:37
반응형

정렬 가능에서 비활성화 옵션을 사용하는 방법부에 프로젝트에서 JS?

나는 엘 테이블의 드래그 게이지 효과를 얻기 위해 엘리먼트-의엘-테이블-드래그글을 사용하고 있는데, 아주 잘 작동하고 있다.

이제, 나는 SortableJS의 비활성화 옵션을 사용하고 싶은데, 이것들을 어떻게 조합해야 할지 모르겠어.아래 링크를 확인하십시오.

Github for Sortable을 검색하고 "Disable 옵션"을 검색하십시오.

사용 안 함 옵션을 위한 실시간 데모

이렇게 하는 것이 가능한가?나는 Vue 2.6.11을 사용하고 있다.

정말 고마워.2022년 새해 복 많이 받으세요!

        <el-button type="primary" @click="switchState">{{ Disable }}</el-button>
        <p class="p-3" v-if="departmentlist">
          <ElTableDraggable>
            <el-table
              stripe
              class="table-responsive table"
              header-row-class-name="thead-light"
              :data="departmentlist"
              @row-click="row_clicked_event">
              <!-- <el-table-column label="ID" prop="IDn">
                <template v-slot="{ row }">
                  {{ row.IDn }}
                </template>
              </el-table-column> -->
              <el-table-column label="PLU" prop="PLU" :key="PLU"> </el-table-column>
              <el-table-column :label="$t('Name') + '1'" prop="Name1" :key="$t('Name') + '1'">
              </el-table-column>
              <el-table-column :label="$t('Name') + '2'" prop="Name2" :key="$t('Name') + '2'">
              </el-table-column>
              <el-table-column :label="$t('Sort Order')" prop="SortOrder" :key="$t('Sort Order')">
              </el-table-column>
              <el-table-column :label="$t('Remarks')" prop="Remarks" :key="$t('Remarks')">
              </el-table-column>
            </el-table>
          </ElTableDraggable>
        </p>
        <p class="p-3" v-else>
          {{ $t("No Records") }}
        </p>


<script>
import ElTableDraggable from 'element-ui-el-table-draggable'

export default {
  components: {
    ...
    ElTableDraggle
  },
  data() {
    ...
  },
  methods:{
    switchState(){
      // This should be where the magic happens I think
    }
  },
}
</script> ```

정렬 가능한 목록을 사용하지 않으려면disabled: true제2의 논거로

var sortable = Sortable.create(list, {
  disabled: true
});

참조URL: https://stackoverflow.com/questions/70546638/how-to-use-the-disable-option-from-sortablejs-in-vue-project

반응형