vue elementui el-table表格增删改（结合form表单）

最新推荐文章于 2024-06-10 20:22:14 发布

J橘子

最新推荐文章于 2024-06-10 20:22:14 发布

阅读量1.1k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/rose_LHJ/article/details/125440248

版权

表格样式

<template>
        <el-table
          :cell-style="{
    'text-align':'center'}"
          :header-cell-style="{
    'text-align':'center'}"
          style=" background-color: rgba(255,255,255,0.1);font-size: 20px"
          v-bind:data="tableData.results"
          v-bind:height="(fulHeight-210)+'px'"
        >
          <el-table-column
            label="ID"
            min-width="8%"
            prop="id"
          />
          <el-table-column
            label="添加日期"
            min-width="40%"
            prop="create_date"
          />
          <el-table-column
            label="操作详情"
            min-width="20%"
            prop="action"
          />
          <el-table-column
            label="用户名"
            min-width="15%"
            prop="user.username"
          />
          <el-table-column
            label="操作"
            min-width="15%"
          >
            <template slot-scope="scope">
              <el-button type="info" @click="dialogFormVisible = true" style="width: 70%;font-size: 20px">添加</el-button>
              <el-button type="info" @click="deletelist(scope.row)" style="width: 70%;font-size: 20px">删除</el-button>
              <el-button type="info" @click="fixlist(scope.row)" style="width: 70%;font-size: 20px">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 弹框 -->
      <el-dialog