- html :
- <Table :columns="people" :data="scores"></Table>
- data:
- people: [
- {
- title: '姓名',
- key: 'examineeName'
- },
- {
- title: '次数',
- key: 'examNum'
- },
- {
- title: '状态',
- key: 'resultState', //EXAM_NO: 未考试, EXAM_FLUNK: 不及格, EXAM_PASS: 及格
- render: (h,params) => { // 根据条件判断内容重写
- console.log(params.row.resultState)
- switch(params.row.resultState){
- case 'EXAM_NO':
- return h('span','未考试')
- case 'EXAM_FLUNK':
- return h('span','不及格')
- case 'EXAM_PASS':
- return h('span','及格')
- }
- },
- filters: [ // 过滤条件
- {
- label: '不及格',
- value: 'EXAM_FLUNK'
- },
- {
- label: '未考试',
- value: 'EXAM_NO'
- },
- {
- label: '及格',
- value: 'EXAM_PASS'
- }
- ],
- filterMethod (value, row) { // 过滤方法
- return row.resultState.indexOf(value)> -1
- }
- },
- {
- title: '成绩',
- key: 'examScore',
- filters: [
- {
- label: '80 分以上',
- value: 1
- },
- {
- label: '60 分以下',
- value: 2
- }
- ],
- filterMultiple: false,
- filterMethod (value, row) {
- if (value === 1) {
- return row.grade> 80;
- } else if (value === 2) {
- return row.grade <60;
- }
- }
- },
- {
- title: '完成时间',
- key: 'finishDate',
- filters: [
- {
- label: '2018-8-11',
- value: '2018-8-11'
- },
- {
- label: '2018-8-21',
- value: '2018-8-21'
- }
- ],
- filterMethod (value, row) {
- return row.finishTime.indexOf(value)> -1
- }
- },
- ],
来源: http://www.bubuko.com/infodetail-3109650.html