SOURCE

var Main = {
  data() {
    return {
      columnData: [
        {
          title: '0', field: 'name_header', fixed: '', 
         	children: [{width: 200, fixed: '', field: 'name', title: 'name'}]
        },
        {
        	title: '1', field: 'role_header', fixed: '', 
        	children: [{width: 220, fixed: '', field: 'role', title: 'role'}]
    		},
        {
      		title: '2', field: 'sex_header', fixed: '', 
      		children: [{width: 240, fixed: '', field: 'sex', title: 'sex'}]
    		},
        {
      		title: '3', field: 'region_header', fixed: '',
      		children: [{width: 260, fixed: '', field: 'region', title: 'region'}]
  			},
        {
      		title: '4', field: 'address_header', fixed: '', 
      		children: [{width: 280, fixed: '', field: 'address', title: 'address'}]
    		},
      ],
      tableData: [],
      arrow: ''
    }
  },
  methods: {
   	toggleFixedColumn (field) {
      
      const xTable = this.$refs.xTable
      // let field = this.columnData[_index].field
      const column = xTable.getColumnByField(`${field}_header`)
      const groupFixed = column.fixed ? undefined : this.arrow
      // const groupFixed = this.arrow
      
      // return false
      // 将分组整体设置固定列
      XEUtils.eachTree([column], column => {
        column.fixed = groupFixed
        console.log(column)
      })
      // 刷新列
      xTable.refreshColumn()
    }
	},
  created () {
    window.aa=this
    var list = []
    for(var index = 0; index < 20; index++){
      list.push({
        name: 'test' + index,
        role: 'developer',
        sex: 'Man',
        date: '2019-05-01',
        time: 1556677810888 + index * 500,
        region: 'ShenZhen',
        address: 'address abc' + index
      })
    }
    this.tableData = list
  }
};
var app = new Vue(Main).$mount('#app')

<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 style="padding: 20px 10px;">
      <vxe-toolbar size="small" style="margin: 10px 5px 20px">
        <template v-slot:buttons>
          <vxe-button @click="arrow = arrow === 'left' ? 'right' : 'left'">{{!arrow ? 'no fixed' : `锁定方向  ${arrow}`}}</vxe-button>
          <vxe-button @click="arrow = ''">clear fixed</vxe-button>
          <vxe-button @click="toggleFixedColumn('name')">锁定第一列</vxe-button>
          <vxe-button @click="toggleFixedColumn('role')">锁定第二列</vxe-button>
          <vxe-button @click="toggleFixedColumn('sex')">锁定第三列</vxe-button>
          <vxe-button @click="toggleFixedColumn('region')">锁定倒数第二列</vxe-button>
          <vxe-button @click="toggleFixedColumn('address')">锁定倒数第一列</vxe-button>
        </template>
      </vxe-toolbar>
       <vxe-grid
        ref="xTable"
        border
        height="400"
        :columns="columnData"
        :data="tableData"
      >
      </vxe-grid>
    </div>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css");