Liv Web2文档

Appearance

Grid Tree 网格树 ​

用于展示并选取网格区域。

全局配置 ​

在全局配置组件属性。

GridTree组件属性配置
ts
app.provide(GRID_TREE_KEY, {
  accordion: true,
  highlightCurrent: true,
  props: {
    id: 'gridId',
    label: 'gridName',
    value: 'gridCode',
    isLeaf: 'leaf',
    children: 'children',
    disabled: 'disabled',
  },
  // others props...
});

业务注入 ​

在全局注入网格加载业务。

注入加载根网格业务
ts
app.provide(LOAD_ROOT_GRID_KEY, () =>
  axios
    .get('/api/grid/getByCode', {
      params: {
        gridCode: '36',
      },
    })
    .then(res => res.data),
);
注入加载用户所属网格业务
ts
app.provide(LOAD_USER_GRID_KEY, () =>
  axios
    .get('/api/grid/getByCode', {
      params: {
        gridCode: '3601',
      },
    })
    .then(res => res.data),
);
注入根据网格编码加载网格业务
ts
app.provide(LOAD_GRID_BY_CODE_KEY, gridCode =>
  axios
    .get('/api/grid/getByCode', {
      params: {
        gridCode: gridCode,
      },
    })
    .then(res => res.data),
);
注入根据网格ID加载网格业务
ts
app.provide(LOAD_GRID_BY_ID_KEY, gridId =>
  axios
    .get('/api/grid/getById', {
      params: {
        id: gridId,
      },
    })
    .then(res => res.data),
);
注入根据网格编码加载子级网格业务
ts
app.provide(LOAD_GRID_CHILDREN_BY_CODE_KEY, gridCode =>
  axios
    .get('/api/grid/getChildren', {
      params: {
        gridCode: gridCode,
      },
    })
    .then(res => res.data),
);
注入查询起始网格编码到目标网格编码对应的网格树业务
ts
app.provide(LOAD_GRID_TREE_BY_CODE_KEY, (rootCode, targetCode) =>
  axios
    .get('/api/grid/getExpandedTree', {
      params: {
        rootCode: rootCode,
        targetCode: targetCode,
      },
    })
    .then(res => [res.data.areaTree]),
);

提示

演示数据只展示到区县。

基础用法 ​

v-model参数 ​

v-model支持多个参数的双向绑定。

起始网格 ​

组件默认起始网格为用户所属网格，通过root属性可以设置起始网格为根网格。

设置默认值 ​

通过v-model和v-model:grid-id可以设置默认选中的网格。

属性&事件&插槽透传 ​

Grid Tree基于ElTree封装，所以你可以传入ElTree的所有属性、事件和插槽。

属性 ​

属性名说明
类型
默认值
model-value / v-model选中项绑定值，默认绑定props.value属性对应的值string / number—
grid-id / v-model:grid-id选中项绑定值，默认绑定props.id属性对应的值string / number—
grid-name / v-model:grid-name选中项绑定值，默认绑定props.label属性对应的值string / number—
grid / v-model:grid选中项绑定值，绑定数据对象T—
root是否从根节点开始查询，为false表示从用户所属网格开始查询booleanfalse
类型声明
ts
import type { TreeOptionProps, TreeProps } from 'element-plus/es/components/tree-v2/src/types';
import type { ComponentExposed } from 'vue-component-type-helpers';
import GridTree from './grid-tree.vue';

/**
 * 网格树组件属性
 * @template T 网格的数据类型
 */
export interface GridTreeProps<T = Record<string | number | symbol, any>> {
  /**
   * 是否从根网格开始查询，默认从用户所属网格开始查询。
   * @defaultValue false
   */
  root?: boolean;
}

/**
 * 网格树组件实例
 * @template T 网格的数据类型
 */
export type GridTreeInstance<
  T extends Record<string | number | symbol, any> = Record<string | number | symbol, any>,
> = ComponentExposed<typeof GridTree<T>>;

/**
 * el-tree属性类型
 * @remarks 修改了原生`props`属性的类型。
 */
export type ElTreeProps = Omit<TreeProps, 'props'> & {
  /**
   * 配置选项, 请参阅[el-tree](https://element-plus.org/zh-CN/component/tree.html)组件的[props属性](https://element-plus.org/zh-CN/component/tree.html#props)。
   */
  props: TreePropsProps;
};

/**
 * 网格树组件配置选项
 * @remarks 扩展`id`属性。
 */
export type TreePropsProps = TreeOptionProps & {
  /**
   * 指定选项的id为选项对象的某个属性值。
   * @remarks el-tree没有提供该属性，为实现网格id的双向绑定，故扩展该属性。
   */
  id?: string;
  /**
   * 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效。
   */
  isLeaf?: string;
};

/**
 * 网格树组件包含透传属性在内的全部属性
 * @template T 网格的数据类型
 */
export type GridTreeFullProps<T> = Partial<ElTreeProps> & GridTreeProps<T>;