Vue3+setup实现父子组件单表增删改查写法模板

Abao

已于 2024-09-11 09:32:00 修改

阅读量194

点赞数 2

文章标签： vue.js elementui 前端

于 2024-09-10 18:19:57 首次发布

本文链接：https://blog.csdn.net/weixin_72439307/article/details/142105788

版权

父组件写法

<el-card>
        <!-- el-card 头部插槽 显示列表名和新增按钮 -->
        <template #header>
          <div class="table-header-container">
            <i class="fas fa-th" />角色列表（100）
            <span style="flex-grow: 1" />
            &nbsp;&nbsp;&nbsp;
            <!-- 新增按钮 -->
            <el-button
              icon="fas fa-plus"
              type="text"
              style="margin: -10px 0px"
              @click="click_Add_Roles"
              >&nbsp;新增监管角色</el-button
            >
          </div>
        </template>
        <!-- el-table  显示表格  :data绑定数据-->
        <el-table :data="tableData_List" :height="650" stripe ref="userTable">
          <el-table-column
            label="序号"
            type="index"
            :min-width="100"
            fixed
            align="center"
          />
          <el-table-column
            label="编码"
            prop="code"
            width="300"
            sortable
            align="center"
          />
          <el-table-column
            label="名称"
            prop="name"
            width="180"
            sortable
            align="center"
          />
          <el-table-column
            label="创建时间"
            prop="createdTime"
            :formatter="formatDate"
            width="180"
            sortable
            align="center"
          />
          <el-table-column
            label="更新时间"
            prop="updatedTime"
            :formatter="formatDate"
            width="180"
            sortable
            align="center"
          />
          <el-table-column label="备注" prop="remark" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" :min-width="120">
            <template #default="{ row }">
              <i
                class="fas fa-edit"
                styl