iView表格render函数总结

发表于 | 分类于 | | 阅读次数:
字数统计: 637 字 | 阅读时长 ≈ 3 分钟
  1. 表格列单独放在JS文件里引入data
  2. 按钮的渲染以及eventbus通信
  3. 表头上渲染按钮
  4. 渲染绑定attrs
  5. 列的筛选
  6. 列的排序

表格列单独放在JS文件里引入data

表格列的定义占据太多代码行数，可单独放在JS文件里引入data，并通过eventbus通信。

columnsData.js:

1
2
3
4
5
6
7
8
9
export const columnsData = [
  {
    title: '省',
    key: 'provinceName',
    align: 'center',
    minWidth: 70,
    tooltip: true
  }
];

index.vue:

1
2
3
4
5
6
7
import { columnsData } from './columnsData.js';

data() {
  return {
		columnsData,
  }
}

当列需要拼接时，可采用：

1
2
3
4
5
6
7
8
data() {
  return {
    columnsData:[
    	...columnsData1,
			...columnsData2
    ]
  }
}

按钮的渲染以及eventbus通信

columnsData.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import bus from '@/plugins/eventbus';

export const columnsData = [
  {
    title: '操作',
    align: 'center',
    width: 110,
    render: (h, params) => {
      let edit = h(
        'a',
        {
          on: {
            click: () => {
              bus.$emit('edit-school-detail-handler', params.row);
            }
          }
        },
        '编辑'
      );
      let deleteBtn = h(
        'a',
        {
          on: {
            click: () => {}
          },
          style: {
            marginLeft: '5px'
          }
        },
        params.row.isDelete == '1' ? '已删除' : '删除'
      );
      let sep = h(
        'span',
        {
          style: {
            marginLeft: '5px'
          }
        },
        '|'
      );
      return h('div', {}, [edit, sep, deleteBtn]);
    }
  }
];

index.vue:

1
2
3
4
5
6
7
8
9
this.$bus.$off('edit-school-detail-handler').$on('edit-school-detail-handler', row => {
  this.$router.push({
    name: 'schoolDetail',
    query: {
      detailState: 'EDIT',
      schoolId: row.schoolId
    }
  });
});

效果：

表头上渲染按钮

columnsData.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export const columnsData = [
  {
    title: '编号',
    key: 'index',
    align: 'center',
    width: 50
  },
  {
    renderHeader: (h, params) => {
      let add = h(
        'a',
        {
          class: {
            operateBtn: true
          },
          on: {
            click: () => {
              bus.$emit('add-agent-handler');
            }
          }
        },
        '添加'
      );
      return h('div', {}, [add]);
    },
    key: 'action',
    align: 'center',
    minWidth: 120
  }
];

效果：

渲染绑定attrs

若要在表格里动态渲染一个a标签，带href属性，并实现下载文件，如

1
<a href="sssss" download="">下载</a>

可如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  title: '操作',
  key: 'statusEnum',
  align: 'center',
  width: 100,
  render: (h, params) => {
    let download = h(
      'a',
      {
        attrs: {
          href: params.row.filePath,
          download: ''
        },
        on: {
          click: () => {}
        }
      },
      '下载'
    );
    return h('div', {}, [download]);
  }
}

同理可绑定img 中src属性 。

列的筛选

当表格含有非常多列时，可进行筛选展示选择的列。

参见iview表格列筛选的组件封装

列的排序

给 columns 数据的项，设置 sortable: true，即可对该列数据进行排序。

1
2
3
4
5
{
  title: 'Date',
  key: 'date',
  sortable: true
},

注：

  1. eventbus封装参阅 eventbus封装

表格行样式改变

例如需求：删除的行置灰

1
2
3
4
5
6
7
8
<Table ref="selection"
    v-scoped
    border
    :columns="schooColumnsData"
    :data="tableData"
    no-data-text=""
    :row-class-name="rowClassName">
</Table>
1
2
3
4
5
6
7
8
9
10
methods: {
  // 表格行置灰
  rowClassName(row) {
    if (row.isDelete == '1') {
      return 'demo-table-error-row';
    } else {
      return '';
    }
  }
}
1
2
3
4
5
<style>
.ivu-table .demo-table-error-row td {
  background-color: #ccc;
}
</style>