diff --git a/hw-ui/src/views/board/demo/index.vue b/hw-ui/src/views/board/demo/index.vue
new file mode 100644
index 00000000..e105dfef
--- /dev/null
+++ b/hw-ui/src/views/board/demo/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="demo">
+    <el-table
+      :data="tableData"
+      v-if="show"
+      style="width: 100%;margin-bottom: 20px;"
+      row-key="id"
+      border
+      :tree-props="{children: 'children'}"
+    >
+      <el-table-column
+        width="100"
+        type=""
+      >
+        <template slot-scope="scope">
+          <el-button type="primary" icon="el-icon-plus" @click="add(scope)"></el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="process"
+        label="工序"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="procedure"
+        label="步骤"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="staff"
+        label="人员"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="time"
+        label="时间"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+
+let id = 0
+let deepSearch = (arr, target) => {
+  let results = []
+  arr.forEach(element => {
+    id = Math.max(id,element.id)
+    if (Array.isArray(element.children)) {
+      results = results.concat(deepSearch(element.children, target))
+    } else if (element.id === target) {
+      results.push(element)
+    }
+  })
+  return  results
+}
+export default {
+  name: 'Demo',
+  data() {
+    return {
+      show: true,
+      tableData: [
+        {
+          id: 1,
+          process: 1,
+          procedure: '2016-05-02',
+          staff: '王小虎',
+          time: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          id: 2,
+          process: 1,
+          procedure: '2016-05-02',
+          staff: '王小虎',
+          time: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          id: 3,
+          process: 1,
+          procedure: '2016-05-02',
+          staff: '王小虎',
+          time: '上海市普陀区金沙江路 1518 弄',
+          children: [
+            {
+              id: 4,
+              process: 1,
+              procedure: '2016-05-02',
+              staff: '王小虎',
+              time: '上海市普陀区金沙江路 1518 弄'
+            }
+          ]
+        },
+        {
+          id: 5,
+          process: 1,
+          procedure: '2016-05-02',
+          staff: '王小虎',
+          time: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  methods: {
+    add(e) {
+      let data = deepSearch(this.tableData, e.row.id)?.[0]
+      if (Array.isArray(data.children)) {
+        this.$set(data.children, data.children.length, {
+          id: id+1,
+          process: 1,
+          procedure: '2016-05-02',
+          staff: '王小虎',
+          time: '上海市普陀区金沙江路 1518 弄'
+        })
+        // data.children.push(
+        // )
+      } else {
+        this.$set(data, 'children', [
+          {
+            id: id+1,
+            process: 1,
+            procedure: '2016-05-02',
+            staff: '王小虎',
+            time: '上海市普陀区金沙江路 1518 弄'
+          }
+        ])
+      }
+      // console.log(e)
+      // e.row = {}
+      // this.$set(e,'row',[
+      //   {
+      //     id: 6,
+      //     process: 1,
+      //     procedure: '2016-05-02',
+      //     staff: '王小虎',
+      //     time: '上海市普陀区金沙江路 1512138 弄'
+      //   },
+      // ])
+      console.log(data)
+      console.log(this.tableData)
+      this.show = false
+      this.show = true
+    }
+  },
+  metaInfo() {
+  }
+}
+</script>
+<style scope>
+</style>