ag-grid 中自定义渲染html标签及样式

ag-grid 中自定义渲染html标签及样式

export default

export default {
    data () {
        return {
            ······
            // datatable
            columnDefs: null,
            rowData: null,
            modules: [],
            gridOptions: null,
            gridApi: null,
            defaultColDef: { resizable: true }
        }
    },
    methods: {
        ······
        /**
        * 设置 row 
        */
        getRow () {
            nowColumnDefs = {
              headerName: '审核信息',
              children: [
                {
                  _type: 'string',
                  headerName: '编号',
                  checkboxSelection: true,
                  field: 'enrollment_no',
                  sortable: true,
                  rowDrag: true,
                  suppressSizeToFit: true, // 第一列设置固定宽度 且不会随其他改变而变化
                  width: 200,
                  minWidth: 180,
                  filter: 'agTextColumnFilter', // 需要通过输入框来筛选时，设置为 "agTextColumnFilter"/"agNumberColumnFilter"；如果通过select筛选，则设置为true
                  headerCheckboxSelection: true
                },
                {
                  _type: 'enum',
                  headerName: '当前轮次',
                  field: 'current_round',
                  sortable: true,
                  suppressSizeToFit: true, // 第一列设置固定宽度 且不会随其他改变而变化
                  width: 100,
                  filter: true // 需要通过输入框来筛选时，设置为 "agTextColumnFilter"/"agNumberColumnFilter"；如果通过select筛选，则设置为true
                },
                {
                  _type: 'string',
                  headerName: '标签',
                  field: 'label_setting',
                  cellStyle: {
                    color: '#BB133E',
                    cursor: 'pointer'
                  },
                  cellRenderer: (params) => {
                    return this.$options.filters['tagsFilter'](params.value)
                  },
                  minWidth: 200,
                  sortable: true,
                  suppressSizeToFit: true, // 第一列设置固定宽度 且不会随其他改变而变化
                  filter: 'agTextColumnFilter' // 需要通过输入框来筛选时，设置为 "agTextColumnFilter"/"agNumberColumnFilter"；如果通过select筛选，则设置为true
                },
                {
                  _type: 'string',
                  cellRenderer: (params) => {
                    // console.log(params)
                    return '<span class="detail-btn" style="background: #BB133E;text-align: center;border-radius: 5px;color: #ffffff;padding:2px 5px;">详情</span>'
                  },
                  headerName: '详情',
                  field: 'enrollment_detail',
                  sortable: true,
                  suppressSizeToFit: true, // 第一列设置固定宽度 且不会随其他改变而变化
                  cellStyle: {
                    color: '#0091ea',
                    cursor: 'pointer'
                  },
                  filter: true // 需要通过输入框来筛选时，设置为 "agTextColumnFilter"/"agNumberColumnFilter"；如果通过select筛选，则设置为true
                }
              ]
            }
            
            this.columnDefs = nowColumnDefs
        }
    },

    filters: {
        ······
        /**
        * tags 数据为 '标签1，标签2，标签3'
        */
        tagsFilter (tags) {
            if (!tags === true || tags.length < 1) {
                return ''
            }
            const t = tags.split('，')
            let htmlTag = ''
            for (let p = 0; p < t.length; p++) {
                htmlTag += `<span class='detail-btn' style="border:1px solid #BB133E;text-align: center;border-radius: 5px;color: #BB133E;padding:2px 5px;margin-left:3px">` + t[p] + `</span>`
            }
            return htmlTag
        }
    }
}

template

<ag-grid-vue
             style="width: 100%; height: 1000px;"
             class="ag-theme-balham"
             id="myGrid"
             :defaultColDef="defaultColDef"
             :gridOptions="gridOptions"
             :columnDefs="columnDefs"
             :rowData="rowData"
             @grid-ready="onGridReady"
             :sideBar="sideBar"
             :rowDragManaged="true"
             :rowSelection="'multiple'"
             :suppressRowClickSelection="true"
             >
</ag-grid-vue>