Table Tool

Appearance

Return to top
On this page

Why?

像element-plus 的 ElTable这种表格，本身并没有编辑插槽,校验功能，开发时带来了很大的不便，所以如果有额外的方式可以实现这些功能，那么就可以在不更换表格的情况下带来更好的开发体验。这就是Table Tool的由来。

How?

Table Tool 可以简单快速的帮助表格实现编辑 功能，以ElTable为例，只要在<el-table-column中插入Cell组件就可以实现：

typescript
...
import { Cell } from 'table-tool-vue'
...
 <el-table-column
      prop="name"
      label="名称"
      width="200px"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        <edit-cell :row="row" field="name">
          <el-input v-model="row.name"></el-input>
        </edit-cell>
      </template>
 </el-table-column>
...

TIP

详情请查看表格编辑

当然，在日常开发中，表格验证也是必不可少的，Table Tool 提供了Tool组件，来快速的实现校验：

typescript
...
import { Cell, Tool } from 'table-tool-vue'

<template> 
<tool>
 <el-table>
   ...
  <el-table-column
       prop="name"
       label="名称"
       width="200px"
       :edit-rules="[{ required: true, message: '名称必填' }]"
       show-overflow-tooltip
     >
       <template #default="{ row }">
         <edit-cell :row="row" field="name">
           <el-input v-model="row.name"></el-input>
         </edit-cell>
       </template>
  </el-table-column>
  ...
 </el-table>
</tool>
</template/>

将Tool组件套在ElTable之后，只需要获取Tool的实例并调用validate就能实现校验：

typescript
 toolRef.value.validate();

TIP

详情请查看表格验证