SOURCE

var Main = {
  data() {
    return {
      disabled:true,
      loading:false,
      multipleSelection:[],
      tableData: [{
        id:1,
        startDate: '2019-01-01',
        scheduler: 2,
        startTime:'09:00',
        endTime:'10:00'
      },
      {
        id:2,
        startDate: '2019-01-02',
        scheduler: 1,
        startTime:'15:00',
        endTime:'16:00'
      }],
      options: [{
        label: '法务合约部',
        value: 1
      },
      {
        label: '外聘律师',
        value: 2
      }]
    }
  },
  methods:{
    
    removeTR(url,ids){
      this.$confirm("是否确认删除?", "警告", { type: "error" })
      	.then(mes=>{
        this.loading=true;
        this.$http.post(url, { ids: ids }).then(res => {
            this.loading = false;
            if (res.code == "200") {
              this.successMessage("删除成功");
              this.getTableData(this.params);
            }
          });
      })
      console.log(ids);
    },
    saveTR(url,ids){
      let oneId = this.ids;
      oneId = this.ids.split(',');
      if(oneId.length>1){
        this.$message('只能选择一个保存');
      }else{
        console.log(this.multipleSelection[0]);
        let params_ = {
          'scheduler' : this.multipleSelection[0].scheduler,
          'startTime' : this.multipleSelection[0].startTime,
          'endTime'   : this.multipleSelection[0].endTime,
          'startDate' : this.multipleSelection[0].startDate,
          'id'				: this.multipleSelection[0].id
        }
  if(params_['startTime']==null||params_['endTime']==null||params_['startDate']==null||params_['scheduler']==null){
          this.$message("请确认填写内容不能为空!");
        }else{
          console.log(params_)
          this.loading=true;
          axios
            .post(url,oneId)
        }
      }
    },
    //table 选中处理id
    checkIds(val){
      let ids = [];
      for (let i in val) {
        if(val[i].id!=''){
        	ids.push(val[i].id);
        }
      }
      this.ids = ids.join(",");
      this.disabled = val.length>0 ? false:true;
      this.multipleSelection=val;
      console.log(this.multipleSelection[0].scheduler);
      console.log(this.multipleSelection[0].startTime);
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="//unpkg.com/vue">
</script>
<script src="//unpkg.com/xe-utils">
</script>
<script src="//unpkg.com/element-ui">
</script>
<script src="//unpkg.com/vue-element-extends">
</script>
<div id="app">
  <template>
    <div>
      <el-button @click="$refs.editable.insert({name: 'Name'})">
        新增
      </el-button>
      <el-button type="warning" @click="removeTR(url,ids)" :disabled=disabled>
        删除
      </el-button>
       <el-button type="primary" @click="saveTR(url,ids)" :disabled=disabled>
        保存
      </el-button>
      <elx-editable ref="editable" :data.sync="tableData" @selection-change="checkIds" v-loading="loading">
        <elx-editable-column type="selection" width="55">
        </elx-editable-column>
        <elx-editable-column prop="id" label="id">
        </elx-editable-column>
        <elx-editable-column prop="scheduler" label="值班人" :edit-render="{name: 'ElSelect', options}">
        </elx-editable-column>
        <!--<elx-editable-column prop="startDate" label="开始日期" :edit-render="{name: 'ElDatePicker', attrs: {type: 'datetimerange'}">
        </elx-editable-column>-->
        <elx-editable-column prop="startDate" value-format="yyyy-MM-dd" label="日期" :edit-render="{name:'ElDatePicker',attrs:{type:'date'}}">
        </elx-editable-column>
        <elx-editable-column prop="startTime" label="开始时间" :edit-render="{name:'ElTimeSelect'}">
        </elx-editable-column>
         <elx-editable-column prop="endTime"  label="结束时间" :edit-render="{name:'ElTimeSelect'}">
        </elx-editable-column>
       
      </elx-editable>
    </div>
  </template>
</div>

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
@import url("//unpkg.com/vue-element-extends/lib/index.css");