Vue前端的工作需求-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue前端的工作需求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

加油，新时代打工人！

需求：
实现带树形结构的表格，父数据显示新增下级，和父子都显示编辑。
技术：
Vue3 +Element Plus

<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>