vxe-table 如何实现全表都可以编辑

vxe-table 如何实现全表都可以编辑

这种方式虽然可以实现,但该方式是非常糟糕,应该避免使用这种方式

<vxe-table 
        border
        show-overflow
        ref="xTable"
        height="500"
        :data="tableData"
        :edit-config="{trigger: 'click', mode: 'row'}">
        <vxe-table-column fixed="left" field="name" title="Name" width="100" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name1" title="Name1" width="100" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name2" title="Name2" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name3" title="Name3" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name4" title="Name4" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name5" title="Name5" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name6" title="Name6" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name7" title="Name7" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name8" title="Name8" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name9" title="Name9" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name10" title="Name10" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name11" title="Name11" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name12" title="Name12" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name13" title="Name13" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="name14" title="Name14" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="sex" title="Sex" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="date" title="Date" width="140" :cell-render="{name: 'input'}">vxe-table-column>
        <vxe-table-column field="address" title="Address" width="140" fixed="right" :cell-render="{name: 'input'}">vxe-table-column>
      vxe-table>
export default {
	data () {
		return {
			tableData: []
		}
	},
	mounted () {
		var list = []
	    for(var index = 0; index < 5000; index++){
	      list.push({
	        id: index + 10000,
	        name: 'test' + index,
	        name1:'1',
	        name2:'2',
	        name3:'3',
	        name4:'4',
	        name5:'5',
	        name6:'6',
	        name7:'7',
	        name8:'8',
	        name9:'9',
	        name10:'10',
	        name11:'11',
	        name12:'12',
	        name13:'13',
	        name14:'14',
	        role: 'developer',
	        sex: 'Man',
	        date: '2019-05-01',
	        time: 1556677810888 + index * 500,
	        region: 'ShenZhen',
	        address: 'address abc' + index
	      })
	    }
	    this.tableData = list
	}
}

vxe-table 如何实现全表都可以编辑_第1张图片

在线运行 https://jsrun.pro/4pWKp/edit

你可能感兴趣的:(vue,vue)