devExtreme Vue dxDataGrid 保存与设置 列顺序

保存

template中绑定响应事件option-changed

<DxDataGrid ref="dataGridRef" @option-changed="handlePropertyChange" />

script中定义事件

 handlePropertyChange(obj) {
      //需要保存至方案
      const list = ["visibleIndex", "visible", "fixedPosition","width"]
      if (obj.name !== "columns" || !obj.fullName || !list.includes(obj?.fullName.split(".")[1])) {
        return;
      }
      if (!this.needSave) {
        this.needSave = true;//防止重新设置列时死循环
        return;
      }
      console.log("handlePropertyChange")
      // console.log(obj)
      this.$nextTick(() => {
       //保存到本地或者数据库 获取列的数据 this.gridInstance.state().columns
      })
    },

compute

  gridInstance() {
      return this.$refs.dataGridRef.instance;
    }

设置

template 绑定事件

<DxDataGrid :customize-columns="customizeColumns" />

script定义事件

customizeColumns(){
      const instance = this.$refs.dataGridRef.instance;
      //从本地或者接口获取列的数据，这里是调用了写好的方法去获取数据
      //自己定义一个即可。
      const customizeColumns = await this.tableLayout.getColumns();
      instance.beginUpdate();
      Object.values(customizeColumns).forEach((item, index) => {
        // console.log(item)
        instance.columnOption(index, item)
        this.needSave = false;
      })
      instance.endUpdate();
      this.needSave = true;
      //初始化获取就行了，后续不需要再对columns进行修改，赋值为空
      this.customizeColumns = ()=>{};
}