console
var Main = {
data() {
return {
columns:[
{
props:{
type: 'seq',
title: '序号'
}
},
{
props:{
field: 'name',
title: '名字'
}
},
{
props:{
field: 'sex',
title: '性别'
}
},
{
props:{
field: 'date',
title: '日期'
}
},
//渲染出 <input type="number"/>
{
props:{
field: 'score',
title: '分数',
'edit-render':{ //也可写成editRender
name: 'input', //渲染器名称 可选值 input, textarea, select, $input, $select, $switch
attrs: {
type: 'number'
}
}
}
}
],
tableData: [
{name: '张三', sex: '男', date: '2020-01-01', score: ''},
{name: '李四', sex: '女', date: '2020-01-01', score: ''},
{name: '王五', sex: '男', date: '2020-01-01', score: ''},
{name: '老六', sex: '女', date: '2020-01-01', score: ''},
{name: '老七', sex: '男', date: '2020-01-01', score: ''}
]
}
}
};
var app = new Vue(Main).$mount('#app')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<div id="app">
<template>
<div>
<vxe-table
:data="tableData"
:edit-config="{
trigger: 'click',//编辑在点击时触发
mode: 'row', //编辑模式触发时整行的所有input跟着进入编辑模式
}"
>
<vxe-column v-bind="col.props" v-for="col in columns"></vxe-column>
</vxe-table>
</div>
</template>
</div>