iview table 方法若干

新增默认选中

 1. _checked字段增加
 2. 给data项设置特殊 key _checked: true

2.0 多选框样式错乱,默认选中问题

 1. 修改为元素checkbox 样式大概调整
 2. 如果样式不好看 可以自行修改或者使用其他组件ui checkbox

API

props

属性说明类型
items显示的结构化数据Array
columns表格列的配置描述Array

columns

属性说明类型默认值
title列头显示文字String#
key对应列内容的字段名String#
width列宽名Number#
sortable排序功能Booleanfalse
type'selection':多选功能String#
type'action' 操作功能, 必填参数:actions:[{}]String#

events

事件名说明返回值
@on-row-click单击行或者单击操作按钮方法data,$event,index
@on-selection-change返回选中数组arr
@on-sort-change表格列的配置描述key和排序规则(值为 asc 或 desc)

使用方式

<template>
    <tree-grid 
        :items='data' 
        :columns='columns'
        @on-row-click='rowClick'
        @on-selection-change='selectionClick'
        @on-sort-change='sortClick'
      ></tree-grid>
</template>
<script>
    import TreeGrid from './components/TreeGrid'
    export default {
        data() {
            return {
                columns: [{
                    type: 'selection',
                    width: '50',
                }, {
                    title: '编码',
                    key: 'code',
                    sortable: true,
                    width: '150',
                }, {
                    title: '名称',
                    key: 'name',
                    width: '150',
                }, {
                    title: '状态',
                    key: 'status',
                    width: '150',
                }, {
                    title: '备注',
                    key: 'remark',
                    width: '150',
                }, {
                    title: '操作',
                    type: 'action',
                    actions: [{
                        type: 'primary',
                        text: '编辑'
                    }, {
                        type: 'error',
                        text: '删除'
                    }],
                    width: '150',
                }],
                data: [{
                    id: '1',
                    code: '0001',
                    name: '测试数据1',
                    status: '启用',
                    remark: '测试数据测试数据',
                    _checked: true
                }, {
                    id: '2',
                    code: '0002',
                    name: '测试数据2',
                    status: '启用',
                    remark: '测试数据测试数据',
                    children: [{
                        id: '01',
                        code: '00001',
                        name: '测试数据01',
                        status: '启用',
                        remark: '测试数据测试数据',
                    }, {
                        id: '02',
                        code: '00002',
                        name: '测试数据02',
                        status: '启用',
                        remark: '测试数据测试数据',
                    }]
                }, {
                    id: '3',
                    code: '0003',
                    name: '测试数据3',
                    status: '启用',
                    remark: '测试数据测试数据'
                }, {
                    id: '4',
                    code: '0004',
                    name: '测试数据4',
                    status: '启用',
                    remark: '测试数据测试数据'
                }]
            }
        },
        components: {
            TreeGrid
        },
        methods: {
            rowClick(data, index, event) {
                console.log('当前行数据:' + data)
                console.log('点击行号:' + index)
                console.log('点击事件:' + event)
            },
            selectionClick(arr) {
                console.log('选中数据id数组:' + arr)
            },
            sortClick(key, type) {
                console.log('排序字段:' + key)
                console.log('排序规则:' + type)
            }
        }
    }
</script>
阅读更多

没有更多推荐了,返回首页