333

package.json

@@ -2,6 +2,7 @@
   "name": "ag-element-ui",
   "version": "0.1.0",
   "private": true,
+  "main": "./main.js",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",

packages/agTable/index,js

@@ -0,0 +1,9 @@
+import agTable from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agTable.install = function (Vue) {
+    Vue.component(agTable.name, agTable)
+}
+
+// 导出组件
+export default agTable;

packages/agTable/src/index.vue

@@ -0,0 +1,47 @@
+<template>
+    <el-table v-bind="$attrs" v-on="$listeners" :data="data">  
+     <el-table-column v-for="item,index in columns" :key="index" v-bind="item">    
+            <template slot-scope="scope"> 
+              <div  v-if="item.soltName"> 
+          
+              <slot :name="item.soltName" :row="scope.row" >  
+              </slot> 
+            </div> 
+            <div v-else>  
+              {{scope.row[item.prop]}} 
+              </div>
+            </template>
+          
+     </el-table-column>
+    </el-table>
+  </template>
+  
+  <script>  
+
+  export default {
+    name: "agTable",
+    components: { 
+
+    },
+    props:["columns","data"],
+    data() {
+      return {
+        width: "160px",
+     
+      };
+    }, 
+    mounted() {
+      
+    },
+    methods: {},
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  ::v-deep {
+    .el-table {
+      width: 100%;
+    }
+  }
+  </style>
+  

packages/index.js

@@ -2,6 +2,8 @@
   import agInput from './agInput/index'
   import agSelect from './agSelect/index'
  
+  // 注册组件
+ 
   // 组件列表
   const components = [
     agInput,

src/App.vue

@@ -39,7 +39,14 @@
     >
     </ag-MultifunctionSearch>
   <agQuery :inputs="inputs" @onSearch="onSearch"/>
-    
+    <agTable :columns="columns" :data="tabledata" >
+      <template #name="{row}">
+       <div>{{row.name}}11</div>
+      </template> 
+      <template #date="{row}">
+        <div>{{row.date}} </div>
+       </template> 
+    </agTable>
     <!-- <el-input
       size="small"
       placeholder="请输入内容"
@@ -57,6 +64,8 @@
 </template>
 
 <script>
+ import ElementUI from 'element-ui';
+ import Vue from 'vue';
 import agDialog from "../packages/agDialog/src/index.vue";
 import agDatePicker from "../packages/agDatePicker/src/index.vue";
 import agInput from "../packages/agInput/src/index.vue";
@@ -65,8 +74,12 @@ import agNumberRange from "../packages/agNumberRange/src/index.vue";
 import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
 import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
 import agQuery from "../packages/agQuery/src/index.vue";
+import agTable from "../packages/agTable/src/index.vue";
+
+Vue.use(ElementUI);
 
 export default {
+  
   components: {
     agDialog,
     agDatePicker,
@@ -75,7 +88,8 @@ export default {
     agNumberRange,
     agCascadeOptional,
     agMultifunctionSearch,
-    agQuery
+    agQuery,
+    agTable
   },
   data() {
     var validatePass = (rule, value, callback) => {
@@ -98,6 +112,20 @@ export default {
       ruleForm: {
         pass: [],
       },
+      columns:[
+         {soltName: "date", width:200,type:"expand" },
+         {soltName: "name", label: "姓名" },
+         {prop: "xinghao", label: "型号",width:120 },
+         {prop: "dianchi", label: "电池" ,width:500},
+         {prop: "pinpai", label: "品牌" ,width:200},
+         {prop: "address", label: "地址" ,fixed:'right',width:100}
+      ],
+      tabledata:[
+         {date: "2016-05-02", name: "王小虎1", address: "上海市普陀区金沙江路 1518 弄"},
+         {date: "2016-05-03", name: "王小虎2", address: "上海市普陀区金沙江路 1518 弄"},
+         {date: "2016-05-04", name: "王小虎3", address: "上海市普陀区金沙江路 1518 弄"},
+         {date: "2016-05-05", name: "王小虎4", address: "上海市普陀区金沙江路 1518 弄"}
+      ],
       rules: {
         pass: [{ validator: validatePass, trigger: "blur" }],
       },

src/main.js

@@ -0,0 +1,21 @@
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+
+console.log('main.js', process.env);
+Vue.use(ElementUI);
+
+
+
+
+
+new Vue({
+    el: '#app',
+    router,
+    store,
+    render: (h) => h(App)
+  })