Grid

Grid

表格。

说明

组件API详细内容请参考：vxe-table: https://www.antdv.com/components/overview-cn/

Grid新增属性

• 属性说明：

Grid新增方法

• 属性说明：

Grid.Column新增属性

• 属性说明：

使用方法

• 代码示例：

  // 在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: '性别'})]);

• 注意：