SOURCE

console 命令行工具 X clear

                    
>
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>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->

<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>