1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
| <template> <div class="app"> <dynamic-table :columns="columns2" :data="data" :attrs="tableAttr" :event="tableEvent" ></dynamic-table> </div> </template>
<script> import DynamicTable from "./components/DynamicTable"; export default { name: "App", data() { return { tableAttr: { height: `400px`, stripe: false, border: true, fit: true }, tableEvent: { "selection-change": val => { console.log(val); } }, columns2: [ { type: "selection", width: "55" }, { label: "Address", prop: "address", width: 300 }, { label: "Postcode", prop: "zip", width: 200, sortable: true, "sort-method": function(a, b) { return b.zip - a.zip; } }, { label: "Action", fixed: "right", width: "300", render: (h, params) => { return h("div", [ h( "el-button", { props: { type: "primary", size: "mini" }, on: { click() { console.log(params); } } }, "查看" ) ]); } } ], data: [ { name: "John Brown", age: 18, address: "New York No. 1 Lake Park", province: "America", city: "New York", zip: 100010 } ] }; }, components: { DynamicTable } }; </script>
|