SOURCE

Vue.prototype.$modal = VXETable.modal
//自定义全局的格式化处理函数
VXETable.formats.mixin({
  // 格式化性别
  formatSex ({ cellValue }) {
    return cellValue ? (cellValue === '1' ? '男' : '女') : ''
  },
  // 格式化下拉选项
  formatSelect ({ cellValue }, list) {
    const item = list.find(item => item.value === cellValue)
    return item ? item.label : ''
  },
  // 格式化日期，默认 yyyy-MM-dd HH:mm:ss
  formatDate ({ cellValue }, format) {
    return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')
  },
  // 四舍五入金额，每隔3位逗号分隔，默认2位数
  formatAmount ({ cellValue }, digits = 2) {
    return XEUtils.commafy(XEUtils.toNumber(cellValue), { digits })
  },
  // 格式化银行卡，默认每4位空格隔开
  formatBankcard ({ cellValue }) {
    return XEUtils.commafy(XEUtils.toString(cellValue), { spaceNumber: 4, separator: ' ' })
  },
  // 四舍五入,默认两位数
  formatFixedNumber ({ cellValue }, digits = 2) {
    return XEUtils.toFixed(XEUtils.round(cellValue, digits), digits)
  },
  // 向下舍入,默认两位数
  formatCutNumber ({ cellValue }, digits = 2) {
    return XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits)
  },
  // 转换 moment 类型为字符串
  toMomentString ({ cellValue }, format) {
    return cellValue ? cellValue.format(format) : ''
  }
})
var Main = {
  data() {
    return {
      tableData: [
        { name: '小红', role: 6666, num: 66666 },
        { name: '老王', role:666, num: 666 },
        { name: '小红', role: 3222, num: 3222 },
        { name: '小明', role: 33333, num: 3333 },
        { name: '老徐', role: 5555, num: 5555 },
        { name: '老王', role: 555, num: 555} 
      ],
      formItems4: [
               // { field: 'SJJF', title: '库房', span: 8, itemRender: { name: '$input', props: { suffixIcon:'fa fa-ellipsis-h',placeholder: '请输入名称' },events:{'suffix-click':this.testSelectJF('a','b')} } },
                { field: 'SJJF2', title: '库房-配置式', span: 8, itemRender: { name: '$input', props: { suffixIcon:'fa fa-ellipsis-h',placeholder: '请输入名称' },events:{'suffix-click':()=>{this.testSelectJF('d','e')}} } },
                                    { field: 'SJJF22', span: 8, itemRender: { name: '$button', props: {type:'button', suffixIcon:'fa fa-ellipsis-h', content: '联查0' },events:{'suffix-click':()=>{this.testSelectJF('d','e')}} } },
                                    { align: 'center', span: 6, itemRender: { name: '$button', props: { type:'button', content: '联查1', status: 'primary' },events:{'click':()=>{this.testSelectJF('d','e')} }} },
                                    { align: 'center', span: 6, itemRender: { name: '$button', props: { type:'button', content: '联查2', status: 'primary' },events:{'click':()=>{this.testSelectJF('d','e')} }} },
                { align: 'center', span: 24, itemRender: { name: '$buttons', children: [{ props: { type: 'button', content: '测试', status: 'primary' } ,events:{'click':()=>{this.testSelectJF('d','e')} } }] } }
				               	                
              // { field: 'SFKTD2', title: '是否可替代', span: 8, itemRender: { name: '$checkbox', options: [{ label: '', value: 'Y' }] } },
              
             
              ],
              formData4: {
               SYJF: 'test',
               JJCG:true,
               SFKTD: ['Y'],
                role: '',
                age: 22
              },
              formData3: {
                SYJF: 'test',
                SFKTD:true,
                sex: '',
                age: 30,
                status: '1',
                weight: null,
                date: null,
                active: false,
                single: '1',
                flagList: []
              }
    }
  },
  methods:{
      testSelectJF(x,y)
      {
         // alert('从弹出窗口中选择机房')
          alert(x+';'+y)
      }
      /* testSelectJFtest(x,y)
      {
          alert('从弹出窗口中选择机房-2')
          alert(x+';'+y)
      }*/
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$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@2.10.22"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">

 <p>
       <vxe-form :data="formData3" title-align="right" title-width="100" >

            <vxe-form-item title="库房x" field="name" span="6">
              <vxe-input v-model="formData3.SYJF" 
                   suffix-icon="fa fa-ellipsis-h" @suffix-click="testSelectJF('a','b')"                                 
                        placeholder="库房">                     
            </vxe-input>            

            </vxe-form-item>
             <vxe-form-item title="是否可替代" field="name" span="6">
              <vxe-checkbox v-model="formData3.SFKTD" 
                        suffix-icon="fa fa-ellipsis-h" @suffix-click="testSelectJF()"                            
                        placeholder="是否可替代">                     
            </vxe-checkbox>  
            </vxe-form-item>
        </vxe-form>
 </p>
       <p>
           
          <vxe-form :data="formData4" :items="formItems4"></vxe-form>
           
        </p>
  <template>
    <div>
      <vxe-table 
        border
        highlight-hover-row
        height="400"
        :data="tableData">
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="name" title="单字段排序 name" sortable></vxe-table-column>
        <vxe-table-column field="role" title="金额未启用format" sortable></vxe-table-column>
        <vxe-table-column field="num" title="金额排序"  sortable sortType='number' formatter='formatAmount'></vxe-table-column>
      </vxe-table>
      
    </div>
  </template>
</div>

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