VUE~~~table编辑列功能

编辑列的功能
//列信息中配置：scopedSlots: { customRender: 'editname' }//<template slot="editname" slot-scope="text, record">  <editable-cell :col="'name'" :record="record" @change="handleEditname(record, 'name', $event)"/></template>//模板&方法const EditableCell = {  props: {    record: Object,    col: String  },  data () {    return {      editable: false,      inputtext: ""    };  },  methods: {    handleChange (e) {      const value = e.target.value;      this.record[this.col] = value    },    check () {      this.editable = false;      this.$emit('change', this.record[this.col]);    },    edit () {      this.editable = true      this.inputtext = this.record[this.col]    },    close () {      this.editable = false      this.record[this.col] = this.inputtext    }  },  render () {    if (this.editable) {      return (        <div class="editable-cell">          <div class="editable-cell-input-wrapper">            <a-input value={this.record[this.col]} {...{ on: { pressEnter: this.check, change: this.handleChange } }} />            <a-icon type="check" class="editable-cell-icon-check" {...{ on: { click: this.check } }} />            <a-icon type="close" style="margin-left:8px;" {...{ on: { click: this.close } }} />          </div>        </div>      )    } else {      return (        <div class="editable-cell">          <div class="editable-cell-text-wrapper">            {this.record[this.col] || ''}            <a-icon type="edit" class="editable-cell-icon" {...{ on: { click: this.edit } }} />          </div>        </div>      )    }  }};//方法handleEditname (record, dataIndex, value) {}
更多相关文章

随机推荐
