npm安装

npm install yirenck-ui element-ui -S

主要功能

• table表格
• dialog弹窗

官网

yirenck-ui

Author

Brand

在main.js引入elementui和yirenckui

// 引入elementui
import Element from 'element-ui'
Vue.use(Element)
// 引入yirenck-ui
import yirenck from 'yirenck-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(yirenck)

由于时间关系API文档暂未撰写，功能还在开发中，官网正在建设，后期会逐步更新

Demo

<template>
  <el-card>
    <ck-table
      :data="tableData.data"
      border
      pagination
      :column="tableData.column"
      @size-change="handleSizeChange"
      @ck-current-change="handleCurrentChange"
      index
      :current-page="1"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    ></ck-table>
    <ck-dialog
      title="修改"
      :showHide.sync="editDialog"
      width="30%"
      :data="dialogData.data"
      :formItem="dialogData.form"
      :button="dialogData.editButton"
    ></ck-dialog>
    <ck-dialog
      title="详情"
      :showHide.sync="detailDialog"
      width="30%"
      :data="dialogData.data"
      :formItem="dialogData.form"
      :button="dialogData.detailButton"
      disabled
    ></ck-dialog>
  </el-card>
</template> 
 
<script>
export default {
  data() {
    return {
      // 弹窗显示隐藏
      editDialog: false,
      detailDialog: false,
      // 表格数据对象
      tableData: {
        data: [
          {
            id:1,
            date: "2016-05-02",
            name: "王小虎1",
            system:null,
            op: true,
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            date: "2016-05-04",
            name: "王小虎2",
            system:1,
            op: false,
            address: "上海市普陀区金沙江路 1517 弄"
          },
          {
            date: "2016-05-01",
            name: "王小虎3",
            system:1,
            op: true,
            address: "上海市普陀区金沙江路 1519 弄"
          },
          {
            date: "2016-05-03",
            name: "王小虎4",
            system:1,
            op:false,
            address: "上海市普陀区金沙江路 1516 弄"
          }
        ],
        column: [
          {
            tag: "name",
            label: "姓名",
            width: 150 // 宽度
          },
          {
            prop: "address",
            label: "地址",
            showOverflowTooltip: true // 内容过长是否隐藏
          },
          {
            switch: "op",
            label: "态址",
            showOverflowTooltip: true // 内容过长是否隐藏
          },
           {
            prop: "system",
            label: "系统",
            options:[{
          value: 1,
          label: '前台'
        }, {
          value: 2,
          label: '后台'
        }]
            
          },
          {
            label: "操作",
            width: 210,
            button: [
              {
                label: "修改",
                click: row => {
                  this.editDialog = true;
                  console.log(row)
                  this.dialogData.data = row;
                }
              },
              {
                label: "详情",
                click: row => {
                  console.log("详情", row);
                  this.dialogData.data = row;
                  this.detailDialog = true;
                }
              },
              {
                label: "删除",
                click: row => {
                  console.log("删除", row);
                }
              }
            ]
          }
        ]
      },
      dialogData: {
        data: {},
        form: [
          {
            prop: "name",
            label: "姓名",
            showWordLimit: true,
            size: "mini"
          },
          {
            prop: "address",
            label: "地址"
          },
          {
            switch: "op",
            label: "状态"
          },
           {
            select:"system",
            label: "系统",
            filterable:true,
            options:[{
          value: 1,
          label: '前台'
        }, {
          value: 2,
          label: '后台'
        }]
          }
        ],
        editButton: [
          {
            label: "确认",
            type: "primary", // 按钮类型 默认为mini
            click: row => {
              console.log("确认", row);
              this.editDialog = false;
            }
          },
          {
            label: "取消"
          }
        ],
        detailButton: [
          {
            label: "关闭"
          }
        ]
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

浏览器支持

Modern browsers and Internet Explorer 10+.