Vue encapsulates the table component in element

In the background system, the table is used for a large number of times, so it is decided to use it as a component.

1. Create a table. vue File

<! -- Region encapsulated paging table --> <template> <Div class = "table"> <El-Table id = "itable" v-loading.iTable = "options. loading ": Data =" list ": stripe =" options. stripe "ref =" mutipletable "@ selection-change =" handleselectionchange "> <! -- Region selection box --> <El-table-Column V-If = "options. mutiselect "type =" selection "style =" width: 55px; "> </El-table-column> <! -- Endregion --> <! -- Region data column --> <template V-for = "(column, index) in columns"> <El-table-column: prop = "column. prop ": Key = 'column. label ': Label = "column. label ": align =" column. align ": width =" column. width "> <template slot-scope =" Scope "> <template V-If = "! Column. render "> <template V-If =" column. formatter "> <span V-html =" column. formatter (scope. row, column) "> </span> </template> <template V-else> <span >{{ scope. row [column. prop] }}</span> </template> <template V-else> <expand-DOM: column = "column": ROW = "scope. row ": render =" column. render ": Index =" Index "> </expand-dom> </template> </El-table-column> </template> <! -- Endregion --> <! -- Region button operation group --> <El-table-column ref = "fixedcolumn" label = "operation" align = "center": width = "operates. width ": Fixed =" operates. fixed "V-If =" operates. list. filter (_ x => _ x. show = true ). length> 0 "> <template slot-scope =" Scope "> <Div class =" operate-group "> <template V-for =" (BTN, key) in operates. list "> <Div class =" item "V-If =" BTN. show ": Key = 'btn. id'> <El-button: TYPE = "BTN. type "size =" mini ": icon =" BTN. icon ": Disabled = "BTN. disabled ": Plain =" BTN. plain "@ click. native. prevent = "BTN. method (Key, scope. row) "> {BTN. label }}</El-button> </div> </template> </El-table-column> <! -- Endregion --> </El-Table> </div> </template> <! -- Endregion --> <SCRIPT> export default {props: {list: {type: array, default: []}, // data list columns: {type: array, default: []}, // The column to be displayed === prop: attributes of the column data, label: column name, align: align, width: column width operates :{}, // OPERATION button group ==== label: Text, type: type (Primary/success/warning/danger/INFO/text), show: Show, icon: button icon, plain: whether the simple button, Disabled: whether to disable, method: callback method options: {type: object, default: {stripe: false, // whether it is a zebra print table highlightcurrentrow: false // whether to highlight the current row},} // table control parameters}, // component components: {expanddom: {functional: True, props: {row: object, render: function, index: Number, column: {type: object, default: NULL }}, render: (H, CTX) =>{ const Params = {row: CTX. props. row, index: CTX. props. index} If (CTX. props. column) Params. column = CTX. props. column return CTX. props. render (H, Params) }}, // data () {return {pageindex: 1, multipleselection: [] // multiple rows selected }}, mounted () {}, computed :{}, Methods :{// handleselectionchange (VAL) {This. multipleselection = Val this. $ emit ('handleselectionchang', Val)}, // display the table operation pop-up window showactiontabledialog () {console. log (1, 4444) This. $ emit ('handelaction') }}</SCRIPT> <style lang = "SCSs"> </style>

2. Call Components

<Template> <Div class = "table-page"> <I-table: List = "list" @ handleselectionchange = "handleselectionchange": Options = "options ": columns = "columns": operates = "operates"> </I-Table> </div> </template> <SCRIPT> Import itable from '.. /components/table 'export default {components: {itable}, data () {return {list: [{ID: '24', Title: 'No. 3', state: 0}, {ID: '23', Title: '3', state: 1}, {ID: '23', title: 'Number3', state: 2}, {ID: '2', Title: 'number3', state: 0}, {ID: '123', title: 'Number 3', state: 1}, {ID: '123', Title: 'Number 3', state: 1},], // table data options: {stripe: true, // whether it is a zebra print table loading: false, // whether to add the table loading animation highlightcurrentrow: True, // whether the current row can be highlighted mutiselect: True, // whether the list item selection function is supported}, // table parameter columns: [{prop: 'id', label: 'number', align: 'center ',}, {prop: 'title', label :' Question ', align: 'center', formatter: (row, column, cellvalue) =>{ return' <span style = "white-space: nowrap; color: dodgerblue; ">$ {row. title} </span> '}}, {prop: 'state', label: 'state', align: 'center', render: (H, Params) ==>{ return H ('El-tag', {props: {type: Params. row. state = 0? 'Success': Params. Row. State = 1? 'Info': 'danger '} // component props}, Params. Row. State = 0? 'Shelving ': Params. Row. State = 1? 'Dismounting ': 'reviewing') }},], // The column operates: {width: 200, fixed: 'right', list: [{ID: '1', label: 'edit', type: 'warning', show: True, icon: 'El-icon-edit', plain: True, Disabled: false, method: (Index, row) => {This. handleedit (index, row) },{ ID: '2', label: 'delete', type: 'danger ', icon: 'El-icon-delete', show: true, plain: false, Disabled: false, method: (index, row) => {This. handledel (index, row) }}]} // column operation button }}, Methods: {// select the row handleselectionchange (VAL) {console. log ('val: ', Val)}, // edit handleedit (index, row) {console. log ('index: ', index) console. log ('row: ', row)}, // Delete handledel (index, row) {console. log ('index: ', index) console. log ('row: ', row) }}</SCRIPT>

　　

Vue encapsulates the table component in element