Grid
表格。
说明
组件API详细内容请参考:vxe-table: https://www.antdv.com/components/overview-cn/
Grid新增属性
- 属性说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
seqConfig | Object | 否 | { startIndex: 0 } | 序号的配置 |
store | Object | 否 | 数据store | |
fieldConfig | Array | 否 | 表格监听表格内哪些值改变 |
Grid新增方法
- 属性说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
beforeDrop | Function | 否 | 拖拽前事件 | |
drop | Function | 否 | 拖拽后事件 |
Grid.Column新增属性
- 属性说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
type | String | 否 | 新增的一个属性值switch, 类似于checkbox,但是取值是”0”和”1” |
使用方法
- 代码示例:
// 在script标签中按需引入 import { Data, Grid, } from '@jecloud/ui'; export default { components: { Data, Grid }, setup() { const gridStore = ref([{age: 30,date: "1970-08-06",flag: false,id: 10000,index: 1,name: "Test1",rate: 3,role: "PM",size: 703,type: "html"},{age: 30,date: "1970-08-06",flag: false,id: 10001,index: 22,name: "Test221",rate: 3,role: "PM",size: 73,type: "html"}]); return { gridStore }; }, }; // 在vue的template标签中 <Grid border height="500" keep-source :row-config="{ keyField: 'id' }" :store="gridStore" :auto-load="true" :size="size" :loading="loading" :field-config="['name', 'role', 'age', 'rate', 'flag']" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, activeMethod: () => true, }" :pager-config="true" > <Column type="checkbox" /> <Column type="seq" width="50" title="No." /> <Column type="switch" field="name" title="Switch(默认)" min-width="140" /> <Column field="name" title="Switch(默认)" min-width="140" /> <Column type="switch" :switch-config="{ options: [ { value: 'disable', icon: 'fas fa-bolt' }, { value: 'enable', icon: 'fas fa-bolt', iconStyle: { color: '#f4ce4a' }, check: true, }, ], }" field="role" title="Switch(自定义)" min-width="140" /> <Column type="switch" :switch-config="{ layout: 'buttons', options: [ { label: '居左', value: 'left' }, { label: '居中', value: 'center' }, { label: '居右', value: 'right', icon: 'fas fa-bolt' }, ], }" field="rate" title="Switch(按钮组)" min-width="200" /> </Grid>
事件脚本示例:
const { Grid } = JE.useUi(); const { h, ref }= JE.useVue(); const data = ref([ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' } ]); return h(Grid, {border:true,draggable: true,ref: 'xTable',height: '500',data: data.value },[h(Grid.Column, {type: 'seq'}), h(Grid.Column, {field: "sex",title: '性别'})]);
注意:
最后编辑: 秦永莲 文档更新时间: 2024-07-26 14:15 作者:秦永莲