vue+element-plus+table实现值班信息管理功能

最新推荐文章于 2025-01-10 10:53:54 发布

Tan-玛卡巴卡

最新推荐文章于 2025-01-10 10:53:54 发布

阅读量846

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_60172238/article/details/131724629

版权

文章展示了如何使用Vue.js的ElementUI库来渲染一个表格，数据来源于后端接口。表格包含动态时间信息，数据结构由后端返回的数组转换而来，转换后的数据用于支持表格的多级展示，包括人员名称、单位、排班等信息。同时，提供了增删改功能的交互元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.table代码

需注意的是显示的时间信息什么的都是后端的接口动态拿的

  <el-table
        :data="tableData"
        ref="table"
        row-key="id"
        border
        lazy
        :tree-props="{ children: 'children' }"
        default-expand-all
      >
        <el-table-column label="人员名称"  header-align="center"  :cell-style="tablrow" >
          <template #default="scope">
            <span>
              <span v-if="scope.row.children">单位：</span>{
 { scope.row.name }}
            </span>
            <div class="btn" v-if="!scope.row.name">
              <i
                @click="batchclick(scope)"
                title="批量排班"
                class="el-icon-s-custom"
                style="font-size: 14px; font-weight: bold; margin-right: 5px"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          v-for="(item, index) in column"
          :key="index" 
        >
          <template #header>
            <div :class="['table-header', item.prop == today ? 'current' : '']">
              <div>{
 { item.label }}</div>
              <div>{
 { item.prop }}</div>
            </div>
          </template>

          <template #default="scope">
            <div style="text-align: center; min-height: 35px">
              <div v-for="(itemOne, index) in scope.row.list" :key="index">
                <span v-if="item.prop === itemOne.date">{
 {
                  itemOne.name.replace(/\$[^,]+/g, '').replace(/\$/, '').replace(/\s*/g,"")
                 
                }}</span>
              </div>
            </div>
            <div class="btn" v-if="!scope.row.children">
              <i
                title="添加"
                @click="tableadd(scope, item.prop)"
                v-if="!scope.row[item.prop]"
                class="el-icon-plus blue"
                style="font-size: 14px; font-weight: bold; margin-right: 5px"
              ></i>
              <i
                title="修改"

最低0.47元/天解锁文章