DevExtreme项目相关记录

1.DxDataGrid是网格（表格标签）

 如上图所示：

里面的属性意思如下：

data-source : 动态的数据源

show-borders : 用于控制是否显示表格单元格之间的边框

column-width : 设置列的最小宽度

column-auto-width：自适应列的宽度

key-expr : 用于指定数据项的唯一标识符的表达式

allow-column-reordering : 是否允许列于列直接通过拖拽重新排序

columns ： 动态设置列====》具体可看下面的第7条

@rowClick="handleRowClick" 行点击事件

 表格内常用的组件

1.<DxColumnChooser :enabled="true" /> 用于控制显示哪些列 于列表右上角显示一个小icon，效果如下

 2. <DxFilterRow :visible="true" />  可以模糊查询该列

 3. <DxHeaderFilter :visible="true" /> 可以筛选显示列

 4.<DxGroupPanel :visible="true" />  <DxGrouping :auto-expand-all="false" />  设置可拖拽加分组

 5. <DxPaging :enabled="true" pageSize="10" />              设置分页

      <DxPager

        :visible="true"

        :allowed-page-sizes="[10, 20, 50]"

        display-mode="full"

        :show-page-size-selector="false"

        :show-info="true"

        :show-navigation-buttons="true"

      />

 6. <DxColumn></DxColumn> 设置列，如下图：  

 7.列还可以通过动态设置：通过 :columns加载ts中的column，如下图

 caption : 页面显示的列名

 dataField : 字段名

 minWidth : 100 设置列的最小宽度

 dataType : string 设置数据类型

 alignment : center 设置居中

 cellTemplate ： index 用于生成并显示序号

 cellTemplate ： buttons 用于生成操作列

 fixed ：是否使用fixed定位

 fixedPosition: 'right' 固定列到列表的 右侧

 

=======================================================暂时先记录这些============================================================

 

2024-06-04

记录一下新的！！！

1.开启多选

<!-- 是否可以多选 -->
<DxSelection mode="multiple" />

 2.监听筛选触发，方法放下面