提交代码

src/views/LN/newEnergy/newEnergyAnalysis/index.vue

@@ -132,7 +132,9 @@
                                     </template>
                                 </vxe-column>
                                 <vxe-column field="num3" title="操作">
-                                    <el-button type="primary" link>添加</el-button>
+                                    <template #default="{ row }">
+                                        <el-button type="primary" link @click="addTo(row)">添加</el-button>
+                                    </template>
                                 </vxe-column>
                             </vxe-table>
                         </div>
@@ -147,6 +149,27 @@
                                     <el-radio-button label="原始数据" value="2" />
                                 </el-radio-group>
                             </div>
+                            <div>
+                                <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
+                                    <template #default="{ node, data }">
+                                        <span class="custom-tree-node">
+                                            <span>{{ node.label }}</span>
+                                            <!-- <span>
+                                                <a style="margin-left: 8px" @click="remove(node, data)">删除</a>
+                                            </span> -->
+                                            <el-button
+                                                v-if="data.level != 0"
+                                                style="margin-left: 10px"
+                                                type="danger"
+                                                link
+                                                @click="remove(node, data)"
+                                            >
+                                                删除
+                                            </el-button>
+                                        </span>
+                                    </template>
+                                </el-tree>
+                            </div>
                         </div>
                     </el-card>
                 </div>
@@ -282,6 +305,87 @@ const tableData: any = ref([
         crossTheLine: '越限'
     }
 ])
+const dataSource = ref([
+    {
+        id: 1,
+        level: 0,
+        label: '0%~10%',
+        children: [
+            {
+                id: 11,
+                label: '测试',
+                children: []
+            }
+        ]
+    },
+    {
+        id: 2,
+        level: 0,
+        label: '10%~20%',
+        children: []
+    },
+    {
+        id: 3,
+        level: 0,
+        label: '20%~30%',
+        children: []
+    },
+    {
+        id: 4,
+        level: 0,
+        label: '30%~40%',
+        children: []
+    },
+    {
+        id: 5,
+        level: 0,
+        label: '40%~50%',
+        children: []
+    },
+    {
+        id: 6,
+        level: 0,
+        label: '50%~60%',
+        children: []
+    },
+    {
+        id: 7,
+        level: 0,
+        label: '60%~70%',
+        children: []
+    },
+    {
+        id: 8,
+        level: 0,
+        label: '70%~80%',
+        children: []
+    },
+    {
+        id: 9,
+        level: 0,
+        label: '80%~90%',
+        children: []
+    },
+    {
+        id: 10,
+        level: 0,
+        label: '90%~100%',
+        children: []
+    }
+])
+// 添加树
+const addTo = row => {
+    console.log('🚀 ~ addTo ~ row:', row)
+}
+// 树删除
+const remove = (node: any, data: any) => {
+    const parent = node.parent
+    const children = parent.data.children || parent.data
+    const index = children.findIndex(d => d.id === data.id)
+    children.splice(index, 1)
+    dataSource.value = [...dataSource.value]
+}
+
 const options = ref({})
 const tableStore = new TableStore({
     url: '',
@@ -299,7 +403,7 @@ const timeClick = (row: any) => {
     timePopUpBox.value = row
 }
 // 点击越限
-const detailClick = () => {
+const detailClick = (row: any) => {
     detailRef.value.open()
 }
 provide('tableStore', tableStore)