ElementUI之表头表内容自定义渲染实现

表头自定义渲染

Vue.component('handle-tips', {
    name: 'HandleTips',
    props: {
        list: Array,
        label: String
    },
    template: `<span>{{label}}
        <el-tooltip placement="top" effect="light">
        <div slot="content" style="width: 200px;">
            <template v-for="(item, index) in list">
            <div :key="index"> <h5>{{ item.title }}</h5> <p>{{ item.content }}</p> </div>
            </template>
        </div>
        <i class="question-mark ml5"></i>
        </el-tooltip>
    </span>`
})


* el-table-column列
[{ prop: 'showTip', label: '展示提示信息', width: setWidth(140),
  headerRender(h, { column, $index }) {
  return <handle-tips label='展示提示信息' list={_that.handleTips}></handle-tips>
  }
},
{ prop: 'course', label: '过程', align: 'center',
render(h, row, column){ return <task-progress followCourseList={_that.activitiesArrayList}></task-progress>} 
}]

表内容自定义渲染

Vue.component('task-progress-timeline', {
    name: 'TaskProgressTimeline',
    props: {
        activitiesList: Array
    },
    data: () => {
        return {}
    },
    template: `<div><h4>执行进度</h4>
        <el-timeline>
            <el-timeline-item
            v-for="(activity, index) in activitiesList"
            :key="index"
            :color="activity.isActive ? '#0bbd87': ''">
            <p class="mg pd">{{activity.content}}</p>
            <p class="mg pd grey-12">{{activity.timestamp}}</p>
            </el-timeline-item>
        </el-timeline>
    </div>
    `
});
// 任务执行进程
Vue.component('task-progress', {
    name: 'CourseComponent',
    props: {
        followCourseList: Array
    },
    watch: {},
    methods: {
    },
    template: `
    <el-popover trigger="hover" placement="top">
        <task-progress-timeline :activitiesList="followCourseList"></task-progress-timeline>
        <div slot="reference" class="name-wrapper">
            <i class="task-progress"></i>
        </div>
    </el-popover>
    `
});


* el-table-column列
[{ prop: 'course', label: '过程', align: 'center',
render(h, row, column){ return <task-progress followCourseList={_that.activitiesArrayList}></task-progress>} 
}]

data.activitiesArrayList = [
{ content: '活动按期开始',timestamp: '2018-04-15' }, 
{ content: '通过审核', timestamp: '2018-04-13' }, 
{ content: '创建成功', timestamp: '2018-04-11'}
]

table

<el-table
  ref="datumMultipleTable"
  :data="datumTableList"
  :height="tableHeight"
  border
  style="width: 100%"
  @selection-change="handleSelectionChange">
  	<el-table-column type="index" width="50" label="序号" v-if="showSequence"></el-table-column>
  	<el-table-column type="selection" v-if="multiSelection"></el-table-column>
  <template v-for="(item, index) in datumTableColumns">
    <el-table-column :key="index"
    :prop="item.prop"
    :label="item.label"
    :width="item.width"
    :fixed="item.fixed"
    :align="item.align"
    :show-overflow-tooltip="true"
    :render-header="item.headerRender">
      <template slot-scope="scope">
        <render-column v-if="item.render" :render="item.render" :scope="scope"></render-column>
        <span v-else>{{ item.formatterValue ? item.formatterValue(scope.row, scope.column, scope.row[item.prop], scope.index) : scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
  </template>
  <slot name="table-column-special"></slot>
  <slot name="table-column-operate"></slot>
</el-table>

script

<script>
import RenderColumn from '../common/RenderColumn';
export default {
    name: 'Table',
    components: { RenderColumn },
    props: {
        // 表格
        showTable: {
            type: Boolean,
            default: true
        },
        height: [String, Number],
        showSequence: {
            type: Boolean,
            default: false
        },
        minHeight: {
            type: Number,
            default: 520
        },
        multiSelection: {
            type: Boolean,
            default: false
        },
        datumTableList: {
            type: Array,
            default: () => []
        },
        datumTableColumns: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {}
    },
    watch: {},
    mounted() {},
    computed: {},
    methods: {
        pageSizeChange(size) {
            this.$emit('handleTablePager', { current: this.pageCurrent, size: size}, 'size')
        },
        pageIndexChange(page) {
            this.$emit('handleTablePager', { current: page, size: this.pageSize}, 'page')
        },
        handleSelectionChange(val) {
            this.$emit('tabelSelectionChange', val);
        },
        clearSelectionChange() {
            this.$refs.datumMultipleTable.clearSelection();
        }
    }
}
</script>

render-column

<script>
export default {
    props: {
        render: {
            type: Function,
            default: () =>()=> {}
        },
        scope: {
            type: Object,
            default: () => {}
        }
    },
    render(h) {
        const { row, column, $index } = this.scope
        return this.render(h, row, column, $index)
    }
}
</script>

render函数绑定class

{
prop: "device_status",
label: "设备状态",
render: (h, row, column)=>{ return this.showDeviceStatus(row)}
},
showDeviceStatus(row) {
let data = this.statusOptions.filter(m => m.value === row.device_status)[0]
let text = data.label
let design = data.show
const classNames = ['hollow-circle', design];
const classNames2 = {
    'my-class': true,
    'active': isActive,
    'hidden': isHidden
  };
return <span class={design}><em class={classNames.filter(Boolean).join(' ')}></em>{{text}}</span>
return <span class={design}><em class={Object.entries(classNames2).filter(([, value]) => value).map(([className]) => className).join(' ')}></em>{{text}}</span> // classNames2 
}
statusOptions:[
     {"value": "0", "label": "连接成功", "show": "connection_success"},
     {"value": "1", "label": "连接失败", "show": "connection_error" },
     {"value": "2", "label": "连接中", "show": "connecting"}
],

指定列内容格式化

{
prop: "port_type",
label: "出入类型",
formatterValue: (row)=>{ return this.showSelectText('port_type',row)}
},
showSelectText(type,row) {
let data = this.searchSelectOption[type+'_options'].filter(m => m.value === row[type])
// 等于：this.searchSelectOption.port_type_options.filter(m => m.value === row.port_type)
return data && data.length ? data[0].label : "-"
}