SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
  data () {
    return {

        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
       gridOptions: {
                border: true,
                resizable: true,
                keepSource: true,
                showOverflow: true,
                height: 530,
                loading: false,
                pagerConfig: {
                  total: 0,
                  currentPage: 1,
                  pageSize: 10,
                  pageSizes: [10, 20, 50, 100, 200, 500]
                },
                editConfig: {
                  trigger: 'dblclick', mode: 'cell',autoClear: true,
                },
                columns: [
                  { type: 'seq', width: 60 },
                  { type: 'checkbox', width: 50 },
                  { field: 'name', title: 'Name', editRender: {}, slots: { edit: 'name_edit' } },
                  { field: 'nickname', title: 'Nickname', editRender: {}, slots: { edit: 'nickname_edit' } },
                  { field: 'sex', title: 'Sex', editRender: {}, slots: { default: 'sex_default', edit: 'sex_edit' } },
                  { field: 'role', title: 'Role', editRender: {}, slots: { edit: 'role_edit' } },
                  { field: 'describe', title: 'Describe', showOverflow: true, editRender: {}, slots: { edit: 'describe_edit' } },
                  { title: '操作', width: 200, slots: { default: 'operate' } }
                ],
                data: []
              },
              sexList1: [
                { value: '1', label: '男' },
                { value: '0', label: '女' }
              ]
    }
  },
  created () {
      setTimeout(() => {
        this.gridOptions.loading = false
        this.gridOptions.pagerConfig.total = 10
        this.gridOptions.data = [
            { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '1', age: 28, address: 'Shenzhen' },
            { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: '0', age: 22, address: 'Guangzhou' },
            { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: '1', age: 32, address: 'Shanghai' },
            { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: '0', age: 23, address: 'Shenzhen' },
            { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: '0', age: 30, address: 'Shanghai' },
            { id: 10006, name: 'Test6', nickname: 'T6', role: 'Develop', sex: '0', age: 27, address: 'Shanghai' },
            { id: 10007, name: 'Test7', nickname: 'T7', role: 'Develop', sex: '1', age: 29, address: 'Shenzhen' },
            { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: '0', age: 32, address: 'Shanghai' },
            { id: 10009, name: 'Test9', nickname: 'T9', role: 'Develop', sex: '1', age: 30, address: 'Shenzhen' },
            { id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' }
        ]
        }, 300)
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui@3.2.8/lib/style.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@3.11.4/lib/style.min.css">
  <!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils@3.5.31/dist/xe-utils.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3.8.24/lib/index.umd.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 使用 umd 引用方式需要注意是否锁定版本,默认指向最新版本 -->

<div id="app">
  <template>
    <div>
    <vxe-grid ref="xGrid" v-bind="gridOptions">

          <template #name_edit="{ row }">
            <vxe-input v-model="row.name"></vxe-input>
          </template>
          <template #nickname_edit="{ row }">
            <vxe-input v-model="row.nickname"></vxe-input>
          </template>
          <template #sex_edit="{ row }">
            <el-select popper-class="vxe-table--ignore-clear" v-model="row.sex" type="text" transfer>
              <el-option v-for="item in sexList1" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
          <template #role_edit="{ row }">
             <el-popover
                popper-class="vxe-table--ignore-clear"
                placement="top"
                width="400"
                trigger="click">
                <el-table :data="gridData">
                    <el-table-column width="150" property="date" label="日期"></el-table-column>
                    <el-table-column width="100" property="name" label="姓名"></el-table-column>
                    <el-table-column width="300" property="address" label="地址"></el-table-column>
                </el-table>
                <el-button slot="reference">click 激活</el-button>
                </el-popover>
          </template>
          <template #describe_edit="{ row }">
            <vxe-input v-model="row.describe"></vxe-input>
          </template>
        </vxe-grid>
        
    </div>
  </template>
</div>