JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/xe-utils"></script>
<script src="//unpkg.com/vue-element-extends"></script>
<div id="app">
<template>
<div>
<el-button @click="$refs.editable.insert({name: 'Name'})">New</el-button>
<el-button @click="$refs.editable.removeSelecteds()">Delete selecteds</el-button>
<el-button @click="$refs.editable.clear()">Clear</el-button>
<elx-editable ref="editable" :data.sync="tableData">
<elx-editable-column type="selection" width="55"></elx-editable-column>
<elx-editable-column prop="name" label="Readonly"></elx-editable-column>
<elx-editable-column prop="select" label="Select" :edit-render="{name: 'ElSelect', options}"></elx-editable-column>
<elx-editable-column prop="num" label="Number" :edit-render="{name: 'ElInputNumber'}"></elx-editable-column>
<elx-editable-column prop="date" label="DatePicker" :edit-render="{name: 'ElDatePicker', attrs: {type: 'date', format: 'yyyy/MM/dd'}}"></elx-editable-column>
<elx-editable-column prop="flag" label="Switch" :edit-render="{name: 'ElSwitch', type: 'visible'}"></elx-editable-column>
<elx-editable-column prop="text" label="Input" :edit-render="{name: 'ElInput'}"></elx-editable-column>
</elx-editable>
</div>
</template>
</div>
SCSS
@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
@import url("//unpkg.com/vue-element-extends/lib/index.css");
Babel + JSX
var Main = {
data () {
return {
tableData: [{
date: 1551322088449,
name: 'Name1',
select: '1',
num: '26',
flag: false,
text: 'Content1'
},{
date: 1552460833946,
name: 'Name2',
select: '0',
num: '28',
flag: true,
text: 'Content2'
}],
options: [
{
label: 'Label1',
value: '1'
},
{
label: 'Label2',
value: '0'
}
]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')