使用场景
Table 表格组件中的每一行都有文本输入框或者日期选择框, 那么该如何对其中的输入框或日期选择框进行数据绑定呢?
render 自定义渲染
iview Table 组件中提供了 render 自定义渲染列函数, 使用 vue 的 Render 函数. 传入两个参数, 第一个是 h, 第二个为对象, 包含 row,column 和 index, 分别指当前行数据, 当前列数据, 当前行索引.
实例
<Table stripe ref="currentRowTable" :columns="columns" :data="data"></Table>
- columns: [
- {
- type: 'index',
- title: '序号',
- width: 60,
- align: 'center',
- },
- {
- title: '姓名',
- key: 'name',
- align: 'center',
- render: (h, params) => {
- return h('Input', {
- props: {
- type: 'text',
- value: this.data[params.index].name,
- },
- on: {
- 'on-blur': (event: any) => {
- this.data[params.index].name = event.target.value;
- },
- },
- });
- },
- },
- {
- title: '出生年月',
- key: 'birthday',
- align: 'center',
- render: (h, params) => {
- return h('DatePicker', {
- props: {
- type: 'month',
- value: this.data[params.index].birthday,
- },
- on: {
- 'on-change': (event) => {
- // event 即为日期字符串值
- this.data[params.index].birthday = event;
- },
- },
- });
- },
- },
- ],
- data: [
- {
- name: 'test',
- birthday: '1998-06',
- },
- ];
来源: http://www.qdfuns.com/article/23231/790ba8cd3574139874a1bc281b036cca.html