elementUi + vue实现动态表格的增删改查

最近在做一个动态表格的增删改查,不得不说真的是有难度的。现在写下来记录一下吧!希望对大家有帮助!

<template >
  <div>
    <!--头部-->
    <div>
      <div class="headerWrap">
        <el-form :inline="true" label-position="left">
          <el-form-item label="Table Name">
            <el-select class="tablenameWrap" v-model="theme" placeholder="请选择表名"  size="medium">
              <el-option v-for="item in themetitle" :label="item.mastrNm" :value="item" :key="item.value"></el-option>
            </el-select>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" v-on:click="managerTable">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="updateDataWrap">
        <el-button size="medium" type="primary" @click="addRow">新增</el-button>
        <el-button size="medium" type="primary" @click="handleEdit">修改</el-button>
        <el-button size="medium" type="primary" @click="hanleSave">保存</el-button>
        <el-button size="medium" type="danger" @click="handleDel">删除</el-button>
      </div>
    </div>
    <!--表格-->
    <div>
      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column v-if="seen"  type="selection"></el-table-column>
          <el-table-column v-for="(value, key, index) in tableData[0]" :label="key" :key="index">
            <template slot-scope="scope">
              <el-form :rules="rules" ref=scope.row[key]>
                <span v-if="scope.row.seen"><el-input size="medium" v-model="scope.row[key]" type="text"/></span>
                <span v-if="selectData.indexOf(scope.row) == -1">{{scope.row[key]}}</span>
                <span v-else>
                  <el-input  v-if="key!='PROD_ID'"  size="medium" v-model="scope.row[key]" type="text"/>
                  <span v-else="">{{scope.row[key]}}</span>
                </span>
              </el-form>
            </template>
          </el-table-column>
        </el-table>
        {{tableData}}
        <div class="block" style="margin-top: 20px;text-align: center">
          <el-pagination background
                         layout="prev, pager, next"
                         :page-count="pagecount">
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  import {mangerTable,registerList,addTable,editTable,delTable} from '../../data/getdata'
  export default {
    data(){
      return{
        themetitle:[],
        tableData:[],
        multipleSelection: [],
        indexRow:'',
        pagecount:0,
        theme:{
          value:'',
          mastrNm:'',
          tableNm:''
        },
        seen:false,
        selectData:[],
        saveType:-1,
      }
    },
    created(){
      this.selectTableName();
    },
    methods: {
      /*表格查询*/
      managerTable:function () {
        let theme =this.theme.tableNm;
        if(theme==0){
          this.$message.warning("请选择表名!");
          return false;
        }else{
          this.seen =true;
          mangerTable(theme).then(res=>{
            if(res.status==200){
              if(res.data.result==4){
                this.tableData =res.data.data;
                this.pagecount=res.data.pageNo;
                this.tableData = res.data.data;
              }else{
                this.$message.error(res.data.msg);
              }
            }
          })
        }
      },
      selectTableName:function () {
        registerList().then(res=>{
          let item = res.data.data;
          item.forEach((t)=>{
            this.themetitle.push({
              'mastrNm':t.bmtMastrNm,
              'tableNm':t.bmtTableNm,
              'value':t.bmtMastrId
            })
          })
        })
      },
      //点击新增
      addRow:function () {
        if(this.tableData.length==0){
          this.$message.warning("请选择表名!");
          return false;
        } else if(this.saveType == 1){
          this.$message.warning("请先保存当前编辑项!")
          return false;
        } else {
          this.tableData.push({"seen":true});
          this.saveType =0;
        }
      },
      //点击修改
      handleEdit:function () {
        if(this.tableData.length==0){
          this.$message.warning("请选择表名!");
          return false;
        } else if(this.saveType == 0){
          this.selectData =[];
          this.$message.warning("请先保存当前编辑项!");
          return false;
        }else if(this.multipleSelection.length ==0)
        {
          this.$message.warning("请选择修改数据!");
          return false;
        }else{
          this.saveType=1;
          this.selectData = this.multipleSelection;
        }
      },
      //点击删除
      handleDel:function () {
        let delData = this.multipleSelection;
        let param = delData.map(v=>({
          tableName:this.theme.tableNm,
          values:Object.values(v)
        }))
        delTable(param).then(res=>{
          if(res.data.result ==4){
              this.managerTable();
              this.$message.success("删除成功!")
          }else{
            this.$message.error(res.data.msg);
          }
        })
      },
      //点击保存
      hanleSave:function () {
        if(this.saveType == 0){
          //新增接口
          let addData = this.tableData.filter(function (ele) {
            if(ele.seen == true){
              delete ele.seen;
              return true;
            }
          })
          var param = addData.map(v=>({
             tableName:this.theme.tableNm,
             values:Object.values(v)
           }))
          addTable(param).then(res=>{
              if(res.data.result ==4){
                  this.saveType=-1;
                  this.selectData =[];
                  this.$message.success('保存成功!');
              }else{
                this.$message.error(res.data.msg);
              }
          })
        }else if(this.saveType == 1){
          //修改接口
          let editData =this.selectData.map(v=>({
              tableName:this.theme.tableNm,
              values:Object.values(v)
          }))
          editTable(editData).then(res=>{
              if(res.data.result == 4){
                  this.selectData =[];
                  this.saveType=-1;
                  this.$message.success('保存成功!');
              }else{
                this.$message.error(res.data.msg);
              }
          })
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /*分页方法*/
      handleSizeChange(val){}
    }
  }
</script>

<style scoped>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .headerWrap{
    height: 36px;
    line-height: 36px;
  }
  .tablenameWrap{
    width: 150px;
  }
  .updateDataWrap{
    margin: 20px 0;
  }
  .pagination{
    float: right;
    margin-top: 20px;
  }
</style>

<!--有关于页面中特殊字段的说明
1.selectData是选中行的行信息
2.seen是决定表格中复选框是否出现
3.saveType是0表示新增接口 1表示进修改接口
4.selectData.indexOf(scope.row) == -1 表示当前的行中有没有在选中的行中如果是true则显示span如果是false则表示显示input
-->

这是所有的代码,等验证做好以后我会详细分析!当然js中还有一部分重复的代码还没有进行封装可以实现重复调用。大家先凑活着看吧!

  • 3
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
首先,我们需要安装 `vue` 和 `element-ui`。 ```bash npm install vue element-ui --save ``` 然后,我们在 `main.js` 文件中引入并使用它们: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App) }) ``` 接下来,我们在 `App.vue` 文件中实现表格增删改查功能。 ```vue <template> <div> <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input> <el-button type="primary" @click="handleAdd">添加</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible" title="添加/编辑"> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSubmit">确定</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }, ], searchText: '', dialogVisible: false, form: { name: '', age: 0, }, rules: { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], age: [{ required: true, message: '请输入年龄', trigger: 'blur' }], }, editIndex: -1, } }, methods: { handleAdd() { this.form.name = '' this.form.age = 0 this.dialogVisible = true this.editIndex = -1 }, handleEdit(index, row) { this.form.name = row.name this.form.age = row.age this.dialogVisible = true this.editIndex = index }, handleSubmit() { this.$refs.form.validate(valid => { if (valid) { if (this.editIndex === -1) { this.tableData.push({ name: this.form.name, age: this.form.age }) } else { this.tableData.splice(this.editIndex, 1, { name: this.form.name, age: this.form.age }) } this.dialogVisible = false } }) }, handleDelete(index) { this.tableData.splice(index, 1) }, }, computed: { filteredData() { return this.tableData.filter(item => item.name.indexOf(this.searchText) !== -1) }, }, } </script> ``` 在上面的代码中,我们使用了 `el-table` 组件来展示数据,并用 `el-table-column` 组件来定义表格列。`el-dialog` 组件用于添加和编辑数据。我们用 `el-input` 组件来实现输入框,用 `el-button` 组件来实现按钮。 表格数据使用了 `tableData` 数组来存储,可以通过 `filteredData` 计算属性来实现搜索过滤。 添加和编辑数据时,我们使用了表单验证和表单重置。可以通过 `el-form` 组件来实现表单验证,用 `el-form-item` 组件来定义表单项。用 `ref` 属性来引用表单实例,用 `$refs` 来获取表单实例。 最后,我们可以通过 `handleAdd`、`handleEdit`、`handleSubmit` 和 `handleDelete` 方法来实现增删改功能。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值