vue项目引用ant design vue UI框架可编辑表格单元格

vue项目引用ant design vue UI框架可编辑表格单元格

需求

编辑表格中的单元格

代码效果图

代码如下

<template>
  <div class="schedule-set-course">
    <a-drawer title="排课" placement="right" width="70%" :visible="visible" @close="handleCancel">
      <h2 v-if="record">
        {{record.title}}课表
      </h2>
      <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <!-- v-for="col in ['节次', '星期一', '星期二','星期三','星期四','星期五']" -->
        <template slot="time" slot-scope="text, record, index">
          <div key="time">
            <template v-if="record.editable" >
              <a-time-picker style="width: 70px;" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="(time, timeString) =>onChangeTime(time, timeString, record.key, 'time')" />
              -
              <a-time-picker style="width: 70px;" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="(time, timeString) =>onChangeTime2(time, timeString, record.key, 'time')" @openChange="openChange" />
            </template>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <!-- 'time', -->
        <template
          v-for="col in [ 'mon', 'tue', 'wed', 'thurs', 'fri' ]"
          :slot="col"
          slot-scope="text, record, index"
        >
          <div :key="col">
            <!-- <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="e => handleChange(e.target.value, record.key, col)"
            /> -->
            <a-select
              label-in-value
              v-if="record.editable"
              style="margin: -5px 0; width: 100px"
              :value="text"
              @change="e => handleChange(e.label, record.key, col)"
            >
              <!-- @change="handleChange1" :value="subject.id" -->
              <a-select-option v-for="subject in subjectData" :value="subject.title">
                {{subject.title}}
              </a-select-option>
            </a-select>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.key)">保存</a>
              <a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.key)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
            </span>
          </div>
        </template>
      </a-table>
      <div class="primary">
        <!-- <a-button type="primary" @click="preservation">确认保存</a-button> -->
        <a-button @click="previousPage">返回</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { getSubjectData } from '@/api/modular/school/jiaowuManage'
import moment from 'moment';
const columns = [
  {
    title: '时间',
    dataIndex: 'time',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '节次',
    dataIndex: 'section',
    width: 70,
    scopedSlots: { customRender: 'section' },
    align: 'center'
  },
  {
    title: '星期一',
    dataIndex: 'mon',
    scopedSlots: { customRender: 'mon' },
  },
  {
    title: '星期二',
    dataIndex: 'tue',
    scopedSlots: { customRender: 'tue' },
  },
  {
    title: '星期三',
    dataIndex: 'wed',
    scopedSlots: { customRender: 'wed' },
  },
  {
    title: '星期四',
    dataIndex: 'thurs',
    scopedSlots: { customRender: 'thurs' },
  },
  {
    title: '星期五',
    dataIndex: 'fri',
    scopedSlots: { customRender: 'fri' },
  }
  ,
  {
    title: '操作',
    dataIndex: 'operation',
    width: 200,
    scopedSlots: { customRender: 'operation' },
  },
];

const data = [];
for (let i = 1; i < 9; i++) {
  // if(i == 3) {
  //   data.push({time: '09:50-10:20   大课间活动'})
  // }
  // if(i == 6) {
  //   data.push({time: '14:00-14:05   眼保健操'})
  // }
  data.push({
    key: i.toString(),
    time: '',
    section: i,
    mon: '',
    tue: '',
    wed: '',
    thurs: '',
    fri: ''
  });
}
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      visible: false,
      data,
      columns,
      editingKey: '',
      record: null,
      subjectData: [],
      moment
    }
  },
  methods: {
    init(record) {
      this.record = record
      this.visible = true
      getSubjectData().then(res => {
        this.subjectData = res.data.rows
      })
    },
    handleSubmit(){

    },
    handleCancel(){
      this.visible = false
    },
    handleChange(value, key, column) {
        const newData = [...this.data];
        const target = newData.find(item => key === item.key);
        if (target) {
          target[column] = value;
          // newData.slice(Number(key) + 1)
          // newData.push(target)
          newData[key][column] = value
          this.$nextTick(() => {
            this.data = [...newData];
          })
        }
      // 
    },
    onChangeTime(time, timeString, key, column) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      if (target) {
        target[column] = timeString;
        this.data = newData;
      }
    },
    onChangeTime2(time, timeString, key, column) {
      // console.log(time, timeString, key, column);
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      if (target) {
        target[column] = target[column] + '-' + timeString;
        let t = target[column]
        let tArr = t.split('-')
        target[column] = tArr[0] + '-' + tArr[tArr.length-1]
        this.data = newData;
      }
    },
    openChange(e) {
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.find(item => key === item.key);
      const targetCache = newCacheData.find(item => key === item.key);
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.key));
        delete target.editable;
        this.data = newData;
      }
    },
    handleChange1(e) {
    },
    preservation() {
    },
    previousPage() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.editable-row-operations a {
  margin-right: 8px;
}
.primary {
  // background-color: antiquewhite;
  margin-top: 60px;
  button {
    margin-left: 20px;

    &:nth-child(1) {
      margin-left: 0px;
    }
  }
}
.schedule-set-course {}
</style>