SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
    el: '#app',
    data() {
        return {
            tableData: [],
            sexList: [
                { label: '', value: '' },
                { label: '男', value: '1' },
                { label: '女', value: '0' },
            ],
        }
    },
    created() {
        this.mockList(3000).then(data => {
            this.tableData = data
        })
    },
    methods: {
        changeData() {
            this.mockList(1000).then(data => {
                this.tableData = data
            })
        },
        mockList(size) {
            return new Promise(resolve => {
                const list = []
                for (let index = 0; index < size; index++) {
                    list.push({
                        name: `名称${index}`,
                        sex: '0',
                        num: 123,
                        age: 18,
                        num2: 234,
                        rate: 3,
                        address: 'shenzhen        ygjkhjk'
                    })
                }
                resolve(list)
            })
        },
        delRow() {
            const newData = [...this.tableData];
            newData.splice(1, 1);
            this.tableData = newData.map((item, index) => {
                const newItem = { ...item, _rowindex: index };
                return newItem;
            });
        }
    }
})
<div id="app">
  <div style="height: 500px">
    <vxe-table
      ref="table1"
      border
      show-overflow
      highlight-hover-row
      height="100%"
      :sort-config="{trigger: 'cell'}"
      :data="tableData"
      :scroll-y="{
        gt: 3
      }"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :checkbox-config="{
          reserve: true
      }"
      >
      <vxe-table-column type="checkbox" width="100"></vxe-table-column>
      <vxe-table-column type="seq" width="100"></vxe-table-column>
      <vxe-table-column field=name title=name sortable></vxe-table-column>
      <vxe-table-column field=sex title=sex :edit-render="{name: '$select', options: sexList}"></vxe-table-column>
      <vxe-table-column field=age title=age></vxe-table-column>
      <vxe-table-column field=address title=address show-overflow></vxe-table-column>
      <vxe-table-column field=cz title=cz show-overflow>
        <template v-slot="{ row }">
          <div>
            <button
              title="删除"
              @click="delRow(row)"
            >
              <span>删除</span>
            </button>
          </div>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3"></script>

本项目引用的自定义外部资源