preface

Recently I have been working on a common backend management system (based on Element UI), and there are a lot of duplicate table modules and forms, so consider encapsulating the components and reducing the amount of code.

Preview:

Configuration items:

DynTable usage mode

Parameter names The default value details
tableData [] Render table data
tableColumns [] Used to define header fields and prop receive values
headerStyle { background: ‘#F2F6FC’, color: ‘#606266’ } Define the header style
isTree {} Whether it is a tree structure
loading true Table Table loading effect
handleSelectionChange () => {} The user manually checks the Checkbox (can retrieve all rows whose Checkbox is true)
rowClick () => {} Used for multiple selection tables to switch the selected state of a row
templete ‘ ‘ You can customize the effect display (get all information about the current row by _scope)

Key points:

The templete method is used to customize the table content,

TableColumns Configuration item

Parameter names The default value details
width null Set the current column width –> default “120px”
prop The name of the field corresponding to the column content
label Display title
type Corresponding column types, including (serial number, checknox…)
fixed Whether the column is fixed to the left or right

Code demo:

<dynTable ref='dynTable' loading={this.tableLoading} table-data={this.tableData} table-columns={tableColumns} Handle - selection - change = {this. HandleSelectionChange} row - click = {this. RowClick} / > enclosing tableData said the dataSource Enclosing multipleSelection said this. When multiple storage array handleSelectionChange (row) {enclosing multipleSelection = row}, this.rowClick(row) { this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row) },Copy the code
const tableColumns = [ { prop: '', label: '', type: 'selection' }, { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: <span>{(this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>)}, {prop: 'formId', label: 'formId', width: '140px'}, {prop: 'execResult', label: 'execResult', templete: (_scope) => { return ( <el-switch v-model={_scope.row.execResult} active-value={1} inactive-value={0} Active-color ='#13ce66' inactive-color='#ff4949' disabled/>)}}, {prop: 'createTime', label: 'create date ', width: '180px'}, {prop: 'oaState', label: 'OA audit status ', width: '120px', Fixed: 'right', Templete: (_scope) => { return ( <el-button type='primary' size='mini' disabled={!!_scope.row.oaState} vOn:click={() => This.handleoacheck (_scope.row.id)}>{_scope.row.oaState? ' ':' '}</el-button>)}}]Copy the code

Component source code:

<script> export default { name: 'DynTable', props: { tableData: { type: Array, default: () => ([]) }, tableColumns: { type: Array, default: () => ([]) }, handleSelectionChange: { type: Function, default: () => { } }, rowClick: { type: Function, default: () => { } }, loading: { type: Boolean, default: true }, headerStyle: { type: Object, default: () => ({ background: '#F2F6FC', color: '#606266' }) }, isTree: { type: Object, default: () => ({}) } }, data() { return { } }, methods: { load() {} }, render: function(h) { return ( <el-table ref='multipleTable' data={ this.tableData } header-cell-style={this.headerStyle} border  stripe tooltip-effect='dark' fit // {... this.isTree} row-key={this.isTree.rowKey} lazy={this.isTree.lazy} load={ this.isTree.load } tree-props={this.isTree.treeProps} highlight-current-row on-selection-change={this.handleSelectionChange} on-row-click={this.rowClick} v-loading={this.loading} style='width: 100%'> { this.tableColumns.map((item, index) => { return <el-table-column key={index} width={item.width} align='center' header-align='center' show-overflow-tooltip={true} prop={item.prop} label={item.label} type={item.type} fixed={item.fixed} > {item.templete ? scope => item.templete(scope, this) : '' } </el-table-column> }) } </el-table> ) } } </script>Copy the code

Conclusion:

The encapsulated Table component has met all the requirements for daily development