可编辑表格

效果图

    
      
        
      
      
        
      
    

 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 = ''
    },
},