vxe-grid单元格渲染

vxe-grid单元格渲染

有时候表格显示的内容不是我们需要的，这个时间可以使用单元格渲染，自定义显示的内容

单元格渲染的使用

// index.vue
<template>
  <div style="height: 400px">
    <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid>
  </div>
</template>
<script>
export default {
  data () {
    return {
      gridOptions: {
        highlightHoverRow: true,
        autoResize: true,
        height: 'auto',
        border: true,
        loading: false,
        columns: [
          { type: 'seq' },
          { field: 'name', title: 'Name' },
          { field: 'role', title: 'Role' },
          { field: 'sex', title: 'Sex' }
        ],
        data: []
      }
    }
  },
  mounted () {
    this.getData().then((data) => {
      this.gridOptions.data = data
    })
  },
  methods: {
    getData () {
      return new Promise((resolve) => {
        const list = [
          { name: 'Test1', role: '前端', sex: '男' },
          { name: 'Test2', role: '后端', sex: '男' },
          { name: 'Test3', role: '测试', sex: '男' },
          { name: 'Test4', role: '设计师', sex: '女' },
          { name: 'Test5', role: '前端', sex: '男' },
          { name: 'Test6', role: '前端', sex: '男' },
          { name: 'Test7', role: '前端', sex: '男' }
        ]
        resolve(list)
      })
    }
  }
}
</script>

这是根据数组渲染的表格

单元格渲染，这个时候需要将单元格的内容替换为自定义的内容

// table.js
// 在main.js 中引用table.js 
// import './plugins/table'
import Vue from 'vue'
import store from '../store'
import XEUtils from 'xe-utils'
// eslint-disable-next-line no-unused-vars
import VXETable, { Input, VXEColumn } from 'vxe-table'
import 'vxe-table/lib/style.css'
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'
import RoleCell from './component/RoleCell.vue'

Vue.component(NameCon.name, NameCon)
Vue.component(FilterContent.name, FilterContent)
Vue.use(VXETable)
// Vue.use(VXEColumn)
VXETable.use(VXETablePluginElement)
// 创建一个超链接渲染器
VXETable.renderer.add('MyLink', {
  // 默认显示模板
  renderDefault (h, cellRender, params) {
    // eslint-disable-next-line no-unused-vars
    const { row, column } = params
    return [
      <input class="my-link" value={row[column.property]}>{row[column.property]}</input>
      // <progress value= '70' max= '100' ></progress>
    ]
  }
})
VXETable.renderer.add('RoleCell', {
  // 默认显示模板
  renderDefault (h, cellRender, params) {
    // eslint-disable-next-line no-unused-vars
    const { row, column } = params
    return [
      <RoleCell class="my-link" value={row[column.property]}></RoleCell>
      // <progress value= '70' max= '100' ></progress>
    ]
  }
})

// RoleCell.vue
<template>
    <div>
        {{value}}
        <span>123</span>
    </div>
</template>
<script>
export default {
  name: 'RoleCell',
  props: {
    value: { type: String }
  },
  data () {
    return {
      message: 'abc'
    }
  }
}
</script>

// index.vue 在页面上的column引用
columns: [
          { type: 'seq' },
          { field: 'name', title: 'Name', cellRender: { name: 'MyLink' } },
          { field: 'role', title: 'Role', cellRender: { name: 'RoleCell' } },
          { field: 'sex', title: 'Sex' }
        ]

Name和Role列显示的内容就是我们自定义的内容