列排序

<template>
  <div class="container">
    <div class="box">
      <oce-crud
        :data="tableData"
        :column="tableColumn"
        :option="tableOption"
        @update-column-index="updateColumnIndex"
        @sort-change="sortChange"
      ></oce-crud>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CrudSortDemo',
  data() {
    return {
      tableColumn: [
        {
          label: '列1',
          prop: 'column1',
          search: true,
          expand: true,
        },
        {
          label: '列2',
          prop: 'column2',
          sortable: true, // 开启排序
        },
        {
          label: '列3',
          prop: 'column3',
        },
        {
          label: '列4',
          prop: 'column4',
        },
      ],
      tableData: [
        {
          column1: '1-1',
          column2: '1-2',
          column3: '1-3',
          column4: '1-4',
          id: 1,
          parentId: null,
          hasChild: true,
        },
        {
          column1: '2-1',
          column2: '2-2',
          column3: '2-3',
          column4: '2-4',
          id: 2,
          parentId: null,
        },
        {
          column1: '3-1',
          column2: '3-2',
          column3: '3-3',
          column4: '3-4',
          id: 3,
          parentId: null,
          hasChild: 1,
        },
        {
          column1: '4-1',
          column2: '4-2',
          column3: '4-3',
          column4: '4-4',
          id: 4,
          parentId: null,
        },
        {
          column1: '5-1',
          column2: '5-2',
          column3: '5-3',
          column4: '5-4',
          id: 5,
          parentId: null,
        },
        {
          column1: '6-1',
          column2: '6-2',
          column3: '6-3',
          column4: '6-4',
          id: 6,
          parentId: null,
        },
        {
          column1: '7-1',
          column2: '7-2',
          column3: '7-3',
          column4: '7-4',
          id: 7,
          parentId: null,
        },
        {
          column1: '8-1',
          column2: '8-2',
          column3: '8-3',
          column4: '8-4',
          id: 8,
          parentId: null,
        },
        {
          column1: '9-1',
          column2: '9-2',
          column3: '9-3',
          column4: '9-4',
          id: 9,
          parentId: null,
        },
      ],
      tableOption: {
        searchMenuSpan: 6,
        formDialog: {
          show: true,
        },
        tableOption: {
          sortableRemote: false // 是否使用服务端排序，如果设置为 true 则不会对数据进行处理
        }
      },
    }
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {
    // 修改列顺序
    updateColumnIndex({ newIndex, oldIndex }) {
      const currRow = this.tableColumn.splice(oldIndex, 1)[0];
      this.tableColumn.splice(newIndex, 0, currRow);
      this.tableColumn.forEach((el, index) => {
        el.index = index;
      });
      this.$refs.crud.refreshTable();
    },
    // 当排序条件发生变化时会触发该事件 参考文档 https://vxetable.cn/v3/#/table/api
    sortChange(param) {}
  },
  created() {},
  mounted() {},
}
</script>

Expand Copy Copy