Vue前端的工作需求

加油,新时代打工人!

需求:

实现带树形结构的表格,父数据显示新增下级,和父子都显示编辑。

技术:

Vue3 +Element Plus

html 复制代码
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="date" label="Date" sortable />
      <el-table-column prop="name" label="Name" sortable />
      <el-table-column prop="address" label="Address" sortable />  
      <el-table-column>
         <el-tooltip :content="'Switch value: ' + value" placement="top">
      <el-switch
      v-model="value"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      active-value="100"
      inactive-value="0"
    />
    </el-tooltip> 
     </el-table-column>

      <el-table-column align="right">
      <template #default="scope">
        <el-button
         v-if="[1, 2, 3, 4].includes(scope.row.id)"
         size="small" @click="handleEdit(scope.$index, scope.row)"
          >新增下级
          </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue"
interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]

}
   
const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const handleEdit = (index: number, row: User) => {
console.log(row)
}

const value = ref('0')

</script>
相关推荐
Hilaku17 分钟前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js
GISer_Jing21 分钟前
Zustand 状态管理库:极简而强大的解决方案
前端·javascript·react.js
zacksleo21 分钟前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos
zacksleo27 分钟前
鸿蒙Flutter实战:23-混合开发详解-3-源码模式引入
前端·flutter·harmonyos
三年三月28 分钟前
018-场景遍历和世界坐标系
前端·three.js
zacksleo30 分钟前
鸿蒙Flutter实战:22-混合开发详解-2-Har包模式引入
前端·flutter·harmonyos
doubleZ32 分钟前
使用Trae从零开发一个跳转顶部的Chrome插件
前端·javascript
RR133533 分钟前
图标统计页面的设计与控件 Apache echarts
前端·apache·echarts
用户25191624271135 分钟前
ES6之类:构造函数的语法糖
javascript·ecmascript 6
怀予37 分钟前
JavaScript 对象拯救计划:从"对象恐惧症"到"对象操纵大师"!
前端