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>
相关推荐
Ian在掘金几秒前
bat+python实现easy connect自动连接
前端·python
代码搬运媛3 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖5 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif8 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化
咸虾米11 分钟前
在uniCloud云对象内使用unipay的微信退款出现错误“uniPayCo.refund Error: token校验未通过”的解决方案
前端·后端
前端Hardy18 分钟前
HTML&CSS:产品卡片动画效果
前端·javascript
货拉拉技术23 分钟前
货拉拉开源:鸿蒙路由 TheRouter
android·前端·harmonyos
中杯可乐多加冰25 分钟前
工业4.0数字孪生新引擎:星图云开发者平台全景评测
前端·低代码·掘金·金石计划
云边小卖铺.32 分钟前
运行vue项目报错 errors and 0 warnings potentially fixable with the `--fix` option.
前端·javascript·vue.js
东方-教育技术博主33 分钟前
IDEA运行VUE项目报错相关
vue.js·arcgis·intellij-idea