可编辑表格

<!-- template  -->
<!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        v-for="(th, index) in tableColumnList"
        :key="index"
        v-if="showThList.includes(th.prop)"
        :prop="th.prop"
        :label="th.label"
        :width="th.width || '160px'"
      >
        <template slot-scope="scope">
          <!-- 不可修改 -->
          <div v-if="th.type === 1">
            {{ scope.row[th.prop] }}
          </div>
          <!-- 可修改 -->
          <div v-else>
            <!-- 文本 -->
            <div v-if="th.type === 2">
              <span
                class="span-txt"
                @dblclick="edit(scope.row, scope.$index)"
                v-if="!scope.row.edit"
              >
                {{ scope.row[th.prop] }}
              </span>
              <el-input
                v-model="scope.row[th.prop]"
                type="text"
                v-if="scope.row.edit"
              ></el-input>
            </div>
            <!-- 单选、多选  -->
            <div v-if="[3, 4].includes(th.type)">
              <span
                class="span-txt"
                @dblclick="edit(scope.row, scope.$index)"
                v-if="!scope.row.edit"
              >
                {{ scope.row[th.prop] | getSelectVal(th.option) }}
              </span>
              <el-select
                v-model="scope.row[th.prop]"
                v-if="scope.row.edit"
                placeholder="请选择"
                :multiple="th.type === 4"
              >
                <el-option
                  v-for="item in th.option"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <!-- 日期 -->
            <div v-if="th.type === 5">
              <span
                class="span-txt"
                @dblclick="edit(scope.row, scope.$index)"
                v-if="!scope.row.edit"
              >
                {{ scope.row[th.prop] }}
              </span>
              <el-date-picker
                style="width: 100%"
                v-model="scope.row[th.prop]"
                v-if="scope.row.edit"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.edit"
            @click="edit(scope.row, scope.$index)"
            type="text"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            v-else
            @click="toSub(scope.row, scope.$index)"
            type="text"
            size="small"
          >
            保存
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- script -->
 data() {
    const typeList = () => {
      let arr = [
        { id: 1, name: '新签' },
        { id: 2, name: '续费' },
        { id: 3, name: '转介绍' },
      ]
      return arr
    } // 类型选项,后面要根据接口获取
    return {
      queryForm: {
        page: 1,
        size: 10,
      }, // 分页数据
      total: 0, // 数据总数

      tableData: [
        {
          id: 1,
          number: '学号1111',
          studentName: '王小虎',
          phone: '上海市普陀区金沙江路 1518 弄',
          type: '线上',
          source: '1',
          source1: [1, 2],
          date1: '2021-11-01',
        },
        {
          id: 2,
          number: '学号222',
          studentName: '王小虎',
          phone: '上海市普陀区金沙江路 1517 弄',
          type: '线上',
          source: '2',
          source1: [1, 2],
          date1: '2021-11-01',
        },
        {
          id: 3,
          number: '学号333',
          studentName: '王小虎',
          phone: '上海市普陀区金沙江路 1519 弄',
          type: '线上',
          source: '3',
          source1: [1, 2],
          date1: '2021-11-01',
        },
        {
          id: 4,
          number: '学号444',
          studentName: '王小虎',
          phone: '上海市普陀区金沙江路 1516 弄',
          type: '线上',
          source: '1',
          source1: [1, 2],
          date1: '2021-11-01',
        },
        {
          id: 5,
          number: '学号555',
          studentName: '王小虎5',
          phone: '上海市普陀区金沙江路 1516 弄',
          type: '线上',
          source: '1',
          source1: [1, 2],
          date1: '2021-11-05',
        },
      ], // 表格数据
      tableColumnList: [
        { prop: 'studentName', label: '学生名称', type: 1 },
        { prop: 'phone', label: '手机号码', type: 1 },
        { prop: 'number', label: '学号', type: 2 },
        { prop: 'type', label: '分类', type: 2 },
        { prop: 'source', label: '来源', type: 3, option: typeList() },
        { prop: 'source1', label: '来源1', type: 4, option: typeList(), },
        { prop: 'date1', label: '报名日期1', type: 5 },
        { prop: 'date2', label: '报名日期2', type: 5 },
        { prop: 'date3', label: '报名日期3', type: 5 },
        { prop: 'date4', label: '报名日期4', type: 5 },
      ], // 表格列名：prop(String) 列对应的字段； label(String) 列名;type(Number) 类型，1 不可编辑，2 文本，3 单选，4 多选，5 日期；options(Array) 单选和多选类型时对应的options；width(String) 单元格宽度，默认宽为160px； edit(Boolean) 是否在编辑状态，true为正在编辑；
      editIndex: '', // 编辑行的下标
      thData: [], // 表头数据
      showThList: [], // 显示的列 ["studentName", "number", "source", "source1", "date2", "date3", "date4", "date1", "type", "phone"]
    }
  },
filters: {
    // select对应的name进行显示
    getSelectVal(val, list) {
      let txt = ''
      if (Array.isArray(val) && val.length) {
        // 多选处理
        val.forEach((ids) => {
          list.forEach((item) => {
            if (item.id == ids) {
              txt += `${item.name},`
            }
          })
        })
        // 正则去掉最后一个逗号
        txt = txt.replace(/,$/gi, '')
      } else {
        // 单选处理
        txt = list.filter((item) => item.id == val)[0].name
      }
      return txt
    },
  },
methods: {
  // 编辑
    edit(row, index) {
      // 保存之前没保存的，再编辑新的行
      if (this.editIndex !== '' || this.editIndex === 0)
        this.toSub(this.tableData[this.editIndex], this.editIndex)

      this.editIndex = index
      this.$set(this.tableData[index], 'edit', true)
    },
    // 提交编辑
    toSub(row, index) {
      console.log('提交编辑--- ', row)
      this.$set(this.tableData[index], 'edit', false)
      this.editIndex = ''
    },
},