vue table表格行内编辑

<template>
  <div class="disableLang">
    <div>
      <template slot="header">
        <el-form
          :inline="true"
          :model="formTitle"
          label-position="left"
          ref="formTitle"
        >
          <el-row>
            <el-col :span="1"><xyy-button @click="newIncrease">+新增</xyy-button></el-col>
            <el-col :span="12" class="disableLangInput" v-if ="disableLangInputShow">
              <el-input v-model="formTitle.search"></el-input>
              <xyy-button @click="handelSave">保存</xyy-button>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template slot="body">
        <div>
          <el-table
            :col="col"
            :data="tableData"
            :list-query="listQuery"
            :operation="operation"
            :offset-top="240"
            @get-data="seachDataList"
          >
            <template slot="words" slot-scope="{col}">
              <el-table-column
                :key="col.index"
                :label="col.name"
                :prop="col.index"
                :width="col.width">
                <template slot-scope="{row,$index}">
                  <el-row>
                    <span v-if="row.dsableWord">{{ row.words }}</span>
                    <el-col :span="8" v-if="!row.dsableWord">
                      <div class="grid-content bg-purple">
                        <el-input v-model="row.newWords"></el-input>
                      </div>
                    </el-col>
                    <el-col :span="3" v-if="!row.dsableWord">
                      <div class="grid-content bg-purple-light">
                        <xyy-button @click="SaveData($index, row)">保存</xyy-button>
                      </div>
                    </el-col>
                    <el-col :span="3" v-if="!row.dsableWord">
                      <div class="grid-content bg-purple">
                        <xyy-button @click="CancelData($index, row)">取消</xyy-button>
                      </div>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </template>
            <template slot="createtime" slot-scope="{col}">
              <el-table-column
                :key="col.index"
                :label="col.name"
                :prop="col.index"
                :width="col.width">
              </el-table-column>
            </template>

            <template slot="status" slot-scope="{col}">
              <el-table-column
                :key="col.index"
                :label="col.name">
                <template slot-scope="{row}">
                  <span v-if="row.status === 1" class="currentState1">启用</span>
                  <span v-else-if="row.status === 0" class="currentState1">禁用</span>
                </template>
              </el-table-column>
            </template>
            <template slot="operation" slot-scope="{col}">
              <el-table-column
                :key="col.index"
                :label="col.name"
                :prop="col.index"
                :width="col.width">
                <template slot-scope="{row,$index}">
                  <el-row>
                    <el-button type="text" @click="handerEditor($index, row)">编辑</el-button>
                    <el-button type="text" @click="handerDelete($index, row)">删除</el-button>
                  </el-row>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { disableWordList, addWordList, aremoveWordList, editorWordList } from '@/api/configuration/BlacklistManage';
export default {
  name: 'DisableWord',
  data() {
    return {
      formTitle: {
        search: '' // title搜索
      },
      // 表格显示的数据
      tableData: [],

      listQuery: {
        page: 1, // 当前页数
        pageSize: 10, // 每页显示条目个数
        total: 0 // 总条目数
      },
      col: [
        { index: 'words', width:600, name: '禁用词', slot: true },
        { index: 'createtime', name: '添加日期' },
        { index: 'status', name: '启用状态', slot: true },
        { index: 'operation', name: '编辑', slot: true }
      ],
      operation: [
        {
          name: '编辑',
          type: 1
        },
        {
          name: '删除',
          type: 2
        }
      ],
      disableLangInputShow: false, // 搜索框显示隐藏
      dataInput: '' // input框的数据
    }
  },
  methods: {

    // 点击编辑按钮
    handerEditor(index, row) {
      row.newWords = row.words
      row.dsableWord = false
    },
    // 编辑中的保存禁用词
    SaveData(index, row) {
      row.words = row.newWords
      row.dsableWord = true
      let searchDate = {
        id: row.id,
        words: row.words
      }
      this.listQuery.page = 1
// 调用保存数据接口
      editorWordList(searchDate).then(response => {
        // 保存后 获取禁用词列表数据
        this.seachDataList(this.listQuery)

      }).catch(function(error) {
        console.log(error);
      });

    },
    // 取消保存禁用词
    CancelData(index, row) {
      row.dsableWord = true
    },
    // 查询列表数据
    seachDataList(listQuery) {

      disableWordList(listQuery).then(response => {
        const { pageNum, pageSize, total } = response.data;
        response.data.content.forEach(function(item, index){
          that.$set(item, 'dsableWord', true) //  为了控制行内编辑动态为每一个数据添加的变量
          that.$set(item, 'newWords', '') // 为了控制行内编辑的文字
        })
        this.tableData = response.data.content
        console.log('this.tableData')
        console.log(this.tableData)
        this.listQuery = {
          ...this.listQuery,
          page: pageNum,
          pageSize: pageSize,
          total: total
        };
      }).catch(function(error) {
        console.log(error);
      });

    },


    // 点击新增按钮事件
    newIncrease () {
      this.disableLangInputShow = true
    }

  }
}
</script>
<style lang="scss">
  .disableLang{
    .el-input__inner{
      height: 37px;
      line-height: 37px;
      margin-right: 5px;
    }
  }
</style>
<style scoped lang="scss">
  .disableLang{
    .disableLangInput{
      display: flex;
      >div{
        margin-right: 5px;
      }
    }
  }

</style>