TinyGrid如何配置动态编辑

[chilingling]

简单编辑

操作流程

1. 拖拽表格出来，表格数据绑定到状态管理中的变量

2. 表格列配置配置编辑器

3. 绑定 onEditClosed 事件

4. 根据 opentinyvue 文档，我们可以在编辑关闭的时候，拿到编辑的相关参数

5. 拿到相关的参数之后，就可以根据我们的业务逻辑进行相关设置了。

对应的核心 schema:

{
      "componentName": "TinyGrid",
      "props": {
        "editConfig": {
          "trigger": "click",
          "mode": "cell",
          "showStatus": true
        },
        "columns": [
          {
            "type": "index",
            "width": 60
          },
          {
            "type": "selection",
            "width": 60
          },
          {
            "field": "employees",
            "title": "员工数",
            // 编辑器配置
            "editor": {
              "component": "TinyInput"
            }
          },
          //... 其他表格列
        ],
       // 表格渲染数据绑定
        "data": {
          "type": "JSExpression",
          "value": "this.state.renderTableData"
        },
        "className": "component-base-style",
        // 表格事件绑定，在表格编辑关闭后被触发
        "onEditClosed": {
          "type": "JSExpression",
          "value": "this.onEditClosed"
        }
      },
      "children": [],
      "id": "4b428512"
    }

对应的高码：

<template>
<div class="page-base-style">
  <div class="component-base-style">
    <tiny-button text="新增" class="component-base-style" @click="handleAddRow"></tiny-button>
  </div>
  <tiny-grid
    class="component-base-style"
    :data="state.renderTableData"
    :editConfig="{ trigger: 'click',mode: 'cell',showStatus: true }"
    :columns="[
      { type: 'index',width: 60 },
      { type: 'selection',width: 60 },
      { field: 'employees',title: '员工数',editor: { component: TinyInput } },
      { field: 'created_date',title: '创建日期' },
      { field: 'city',title: '城市' }
      ]
    "
    @edit-closed="onEditClosed"
  >
  </tiny-grid>
</div>
</template>
<script setup>
// ... other script

const state = vue.reactive({
  renderTableData: [{
    id: "1",
    name: "GFD科技有限公司",
    city: "福州",
    employees: 800,
    created_date: "2014-04-30 00:56:00",
    boole: false
  }, {
    id: "2",
    name: "WWW科技有限公司",
    city: "深圳",
    employees: 300,
    created_date: "2016-07-08 12:36:22",
    boole: true
  }]
});

// 编辑绑定逻辑
const onEditClosed = wrap(function onEditClosed(args, event) {
  console.log('editClosed');
});
</script>

其他 FAQ

如何设置编辑组件属性？

查看 @opentiny/vue 的文档
可以得知，我们可以这样给编辑器设置属性：

<template>
	<tiny-grid-column
        field="area"
        title="区域"
        :editor="{
          component: TinySelect,
          // 通过 attrs 传递属性
          attrs: { options, textField: 'name', valueField: 'id' }
        }"
        :format-config="{ data: options, label: 'name', value: 'id' }"
        format-text="enum"
      ></tiny-grid-column>
</template>

所以，我们还可以在上面第2步这样设置：

{
 "component": "TinyInput",
  "attrs": { placeholder: "输入提示词", ...其他属性绑定 }
}

注意：这里可以绑定的属性不包括 modelValue（TinyVue 组件限制）

通过编辑器插槽设置编辑器（WIP）

OpenTiny vue 的文档中，我们可以这样设置编辑器插槽：

<template>
	<tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{}">
        <template #edit="data">
          <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
        </template>
     </tiny-grid-column>
</template>

所以我们可以进行如下操作，在设计器中进行实现

操作流程（WIP）

对应的 schema

{
  "field": "employees",
  "title": "员工数",
  "slots": {
    "edit": {
      "type": "JSSlot",
       // 表格列编辑插槽参数 
      "params": [
        "column",
        "row"
      ],
      // 插槽内容
      "value": [
        {
          "componentName": "div",
          "props": {
            "className": "component-base-style"
          },
          "children": [
            {
              "componentName": "TinyInput",
              "props": {
                "className": "component-base-style",
                "placeholder": "请输入",
                 // modelValue 绑定 对应的行值
                "modelValue": {
                  "type": "JSExpression",
                  "value": "row.employees",
                  "model": true
                }
              },
              "children": [],
              "id": "2a5f6337"
            }
          ],
          "id": "154e1655"
        }
      ]
    }
  },
  "editor": {}
}

对应的高代码

<tiny-grid-column field="employees" title="员工数" :editor="{  }">
  <template #edit="{ column,row }">
    <div class="component-base-style">
      <tiny-input placeholder="请输入" class="component-base-style" v-model="row.employees"></tiny-input>
    </div>
  </template>
</tiny-grid-column>