element-ui-table-list v1.0.4

渲染请求列表组件说明

基于element UI 的二次封装列表组件

引入 TableList 方法

import TableList from '@/components/tableList/index'

获取列表组件操作

new TableList(dom).initTable({
    total: 30,
    isShowSelection: true,
    isShowNumber: true,
    align: "left",
    page: {
        size: 10,
        sizes: [10, 20, 50, 100],
        current: 1,
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    tableData: [
        {
            readNmae: "",
            date: "2016-05-02",
            name: "王小虎",
            state: 1,
            address: "上海市普陀区金沙江路 1518 弄"
        },
        {
            date: "2016-05-04",
            name: "王小虎",
            state: 0,
            address: "上海市普陀区金沙江路 1517 弄"
        },
        {
            date: "2016-05-01",
            name: "王小虎",
            state: 2,
            address: "上海市普陀区金沙江路 1519 弄"
        },
        {
            date: "2016-05-03",
            name: "王小虎",
            state: 1,
            address: "上海市普陀区金沙江路 1516 弄"
        }
    ],
    condition: [
        {
            width: "180",
            prop: "name",
            label: "名称"
        },
        {
            prop: "date",
            label: "时间",
            sortable: true
        },
        {
            prop: "address",
            label: "地址"
        },
        {
            type: "multiple",
            condition: [
                { label: "未开始", value: 0, style: "color:red" },
                {
                    label: "进行中",
                    value: 1,
                    style: "color:#123455"
                },
                { label: "已完成", value: 2, style: "color:#eee" }
            ],
            prop: "state",
            label: "状态",
            sortable: true
        },
        {
            type: "operation",
            label: "操作",
            prop: [
                {
                    name: "查看",
                    handleClick: val => {
                        console.log(val);
                    },
                    size: "small"
                },
                {
                    name: "编辑",
                    handleClick: val => {
                        console.log(val);
                    },
                    size: "small"
                }
            ]
        }
    ]
});

new TableList().initTable(config) 说明

total

总条数 (Number)

isShowSelection

是否显示多选框 (boolean)

isShowNumber

是否显示序号 (boolean)

align

对齐方式 (String)

page

分页显示配置 (Object)

• size (Number)
• sizes (number[])
• layout (String)
• current (number)
• handleSizeChange (Function)
• handleCurrentChange (Function)

page: {
    size: 10,
    sizes: [10, 20, 50, 100],
    layout: "total, sizes, prev, pager, next, jumper",
    current: 1,
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
    }
}

tableData

tableData:[{
    readNmae: "",
    date: "2016-05-02",
    name: "王小虎",
    state: 1,
    address: "上海市普陀区金沙江路 1518 弄"
},
{
    date: "2016-05-04",
    name: "王小虎",
    state: 0,
    address: "上海市普陀区金沙江路 1517 弄"
}]

condition

• width (Number)
• prop (String)
• label (String)
• sortable (Boolean, String)

• type (Null,String)

  处理多条件展示(null,operation,multiple)

  • null || "" 穿空或者不传
  • operation,操作或者其他处理。设置type="operation"时prop必须传Array类型作为列表渲染参数。如：

    condition: [
        {
            type: "operation",
            label: "操作",
            prop: [
                { name: "查看", handleClick(val){ console.log(val); }, size: "small" },
                { name: "编辑", handleClick(val){ console.log(val); }, size: "small" },
            ]
        }
    ]

  • multiple, 多条件筛选，需要设置conditon.condition,对应 tableData[condition.prop] 的值获取 conditon.condition 内的 label、style||class 渲染页面

    condition: [
        {
            type: "multiple",
            condition: [
                { label: "未开始", value: 0, style: "color:red" },
                { label: "进行中", value: 1, class: "testClass"},
                { label: "已完成", value: 2, style: "color:#eee" }
            ],
            prop: "state",
            label: "状态",
            sortable: true
        }
    ]