el-table表格中增加行修改操作

<template>
    <!--表格-->


    <el-table :data="tableData"
    >
      <el-table-column

        :show-overflow-tooltip="true"
        align='center'
        header-align='center'
        height="100px"
        label="序号"
        prop="index">
        <template slot-scope="scope">
          <span>{{(pageNum - 1) * pageEachNumber + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="数据源编码" prop="date"/>
      <el-table-column label="地址        " prop="address">
        <template scope="scope">
          <!--如果show=true的话，就显示el-input-->
          <el-input size="small" v-model="scope.row.address" v-show="scope.row.show" placeholder="请输入内容"></el-input>
          <!--如果show=false的话，就显示值-->
          <span v-show="!scope.row.show">{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="数据源类型" prop="name"/>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="update(scope.row)"
            type="text"
            v-hasPermi="['manager:personnel:saveOrUpdate']"
          >修改
          </el-button>
          <el-button
            @click="save(scope.row)"
            type="text"
            v-hasPermi="['manager:personnel:saveOrUpdate']"
          >保存
          </el-button>
          <el-button
            @click="delete(scope.row)"
            type="text"
            v-hasPermi="['manager:personnel:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>

  export default {
    name: "Resourcedir",
    data() {
      return {

        //  表格数据
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        //分页数据
        pageNum: 1,
        pageEachNumber: 10,
        total: 0,

      };
    },
    mounted() {

      //数据处理
      this.tableData.forEach((item, index) => {
        this.$set(this.tableData[index], 'show', false)
      });

    },
    methods: {
      // 修改
      update(row) {
        row.show = true;
      },
      //保存
      save(row) {
        row.show = false

      },
      delete() {

      },

    }
  };
</script>
<style lang="scss" scoped="scoped">

</style>


复制代码