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>
相关推荐
山有木兮木有枝_几秒前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇6 分钟前
前端 异步任务并发控制
前端
bysking20 分钟前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu21 分钟前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵21 分钟前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
一头小鹿24 分钟前
【JS】原型和原型链 | 笔记整理
javascript
龚思凯26 分钟前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js
于冬恋36 分钟前
Web后端开发(请求、响应)
前端
red润42 分钟前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js
Fly-ping43 分钟前
【前端】vue3性能优化方案
前端·性能优化