首页 > 其他分享> > element 表格弹窗编辑

element 表格弹窗编辑

2021-11-05 16:33:01 作者：互联网

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="public/element/index.css">
  <script src="public/vue.min.js"></script>
  <script src="public/element/index.js"></script>
</head>

<body>
  <div id="app">
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="edit_dialog">
        <el-form :model="edit_form">
          <el-form-item label="序号" label-width="80px">
            <el-input v-model="edit_form.name" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="edit_dialog = false">取 消</el-button>
            <el-button type="primary" @click="handleSet('edit_form')">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</body>
<script>
  var vm = new Vue({
    el:"#app",
    data(){
      return{
        tableData:[
          {name:'joe'},
          {name:'joe'},
          {name:'joe'},
          {name:'joe'},
          {name:'joe'},
        ],
        edit_dialog:false,
        edit_form:{
          name:""
        },
        editIndex:""
      }
    },
    methods:{
      handleEdit(index, row) {
        this.edit_dialog = true;
        this.editIndex = index;
        this.edit_form = {
          name:row.name
        }
      },
      handleSet(index, row){
        this.edit_dialog = false;
        Vue.set(this.tableData, this.editIndex, this.edit_form);
        JSON.stringify(this.tableData);
      },
    }
  })
</script>
</html>

标签：index,name,表格,edit,element,joe,editIndex,弹窗,row
来源： https://www.cnblogs.com/JaneLifeBlog/p/15513900.html

element 表格 弹窗 编辑

element 表格弹窗编辑