前端最终规范


table组件

<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/85b7b674d44311a09179326459bf70ab" alt="" /></p> <h2>组件</h2> <pre><code class="language-javascript"> &lt;template&gt; &lt;div&gt; &lt;el-table :data="tableData" stripe ref="DyTable" style="width: 100%" v-loading="listLoading" v-bind="tableConfig" :height="height" :header-cell-class-name="cellClass" v-on="tableListeners" &gt; &lt;template v-for="(item, index) in columns"&gt; &lt;el-table-column v-if="item.type" :key="index" :type="item.type" v-bind="item" :width="item.width || ''" &gt;&lt;/el-table-column&gt; &lt;el-table-column v-else-if="item.dataCode" :key="index" :prop="item.prop" v-bind="item" :width="item.width || ''" &gt; &lt;template #default="{ row }"&gt; &lt;t-code :dataCode="item.prop" :dataCodeValue="row[item.prop]" &gt;&lt;/t-code&gt; &lt;/template&gt; &lt;/el-table-column&gt; &lt;el-table-column v-else-if="item.slot" :key="index" :label="item.label" :prop="item.prop" :width="item.width || ''" &gt; &lt;template #default="{ row }"&gt; &lt;slot :name="item.prop" v-bind:row="row"&gt;&lt;/slot&gt; &lt;/template&gt; &lt;/el-table-column&gt; &lt;el-table-column v-else v-bind="item" :key="index" :width="item.width || ''" :label="item.label" :prop="item.prop" &gt;&lt;/el-table-column&gt; &lt;/template&gt; &lt;/el-table&gt; &lt;div class="pagination" v-if="remote"&gt; &lt;el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页" :current-page="query.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper,slot" :total="query.total" &gt;&lt;/el-pagination&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import { fetchTablelist } from '@/api/TetchTable/index' import tCode from './components/tCode' export default { name: 'DyTable', props: { columns: { type: Array, require: true, default: () =&gt; { return [] }, }, tableConfig:{ type: Object, default: () =&gt; { return {} }, }, tableListeners:{ type: Object, default: () =&gt; { return {} }, }, name: { type: String, require: true, default: 'DyTable', }, selection: { type: Boolean, default: false, }, remote: { type: Boolean, default: true, }, selectlist: { //选中的项 row-key 必须设置 type: Array, default: () =&gt; { return [] }, }, url: { type: String, default: '', }, // 5-31 增加测试数据 后期使用接口 tableData: { type: Array, }, }, data() { return { height: this.$baseTableHeight() - 250, //tableData: [{sex:2},{sex:1}], listLoading: false, query: { pageSize: 4, pageNum: 1, total: 0, }, } }, components: { tCode }, created() {}, mounted() { if (this.remote) { this.fetchTable({}) this.handlerSelecter() } }, methods: { cellClass(row) { if (row.columnIndex === 0 &amp;&amp; this.selection) { return 'DisableSelection' } else { return '' } }, handlerSelecter() { if (this.tableConfig['row-key'] &amp;&amp; this.selectlist.length &gt; 0) { this.tableData.map((item) =&gt; { if (this.selectlist.includes(item[this.tableConfig['row-key']])) { this.toggleRowSelection(item, true) } else { this.toggleRowSelection(item, false) } }) } }, toggleAllSelection() { this.$refs['DyTable'].toggleAllSelection() }, toggleRowSelection(row, flag) { this.$refs['DyTable'].toggleRowSelection(row, flag) }, async fetchTable(queryParames) { try { const Loading = this.$baseLoading(1) const query = Object.assign({}, this.query, queryParames) let data = await fetchTablelist({ url: this.url, query }) // 5-31 增加测试数据 后期使用接口 // this.tableData = data.list // this.query.total = data.total this.listLoading = false Loading.close() } catch (error) { return this.$message.error(error) this.listLoading = false } }, handleSizeChange(val) { this.query.pageSize = val this.$parent.search() }, handleCurrentChange(val) { this.query.pageNum = val this.$parent.search() }, setTables(arr) { this.tableData = [...arr]; this.handlerSelecte(); }, }, } &lt;/script&gt; &lt;style lang="scss" scoped&gt; .el-dropdown-link { cursor: pointer; color: #409eff; } .el-icon-arrow-down { font-size: 12px; } .sureJump { width: 60px; height: 28px; line-height: 28px; display: inline-block; background: #ffffff; border: 1px solid rgb(220, 223, 230); font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000c17; margin-left: 15px; cursor: pointer; } ::v-deep .el-table .DisableSelection .cell .el-checkbox__inner { display: none !important; position: relative; } ::v-deep .el-table .DisableSelection .cell:before { content: ''; position: absolute; } .pagination { display: flex; justify-content: flex-end; flex-direction: row; ::v-deep.btn-prev { width: 80px; height: 28px; background: #ffffff; border: 1px solid rgb(220, 223, 230); } ::v-deep.el-pagination button:disabled { background: rgba(0, 12, 23, 0.1); } ::v-deep.btn-next { width: 80px; height: 28px; background: #ffffff; border: 1px solid rgb(220, 223, 230); } ::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #2f54eb !important; } } &lt;/style&gt; </code></pre> <h2>使用</h2> <pre><code class="language-javascript"> &lt;DyTable ref="myDyTable" :selectlist="selectlist" :tableData="tableData" :tableListeners="tableListeners" :tableConfig="tableConfig" :columns="columns" &gt; &lt;template v-slot:control="{ row }"&gt; &lt;el-button type="text" icon="el-icon-sell" @click="confirmdocuments(row)" &gt; 交单 &lt;/el-button&gt; &lt;el-button type="text" icon="el-icon-delete" class="danger Line" @click="handlerDelete" &gt; 删除 &lt;/el-button&gt; &lt;el-dropdown @command="handlercommand"&gt; &lt;el-button type="text" icon="el-icon-sell" class="el-dropdown-link" @click="confirmdocuments(row)" &gt; 更多 &lt;/el-button&gt; &lt;el-dropdown-menu slot="dropdown"&gt; &lt;el-dropdown-item :command="{ type: 'edit', parames: row }"&gt; 黄金糕 &lt;/el-dropdown-item&gt; &lt;el-dropdown-item :command="{ type: 'edit', parames: row }"&gt; 狮子头 &lt;/el-dropdown-item&gt; &lt;el-dropdown-item :command="{ type: 'edit', parames: row }"&gt; 螺蛳粉 &lt;/el-dropdown-item&gt; &lt;el-dropdown-item :command="{ type: 'edit', parames: row }"&gt; 双皮奶 &lt;/el-dropdown-item&gt; &lt;el-dropdown-item :command="{ type: 'edit', parames: row }"&gt; 蚵仔煎 &lt;/el-dropdown-item&gt; &lt;/el-dropdown-menu&gt; &lt;/el-dropdown&gt; &lt;/template&gt; &lt;/DyTable&gt;</code></pre> <pre><code class="language-javascript">export default { name: 'CostManagement', data() { return { tableConfig: { // Dytable配置 key: 'myDyTable', 'tree-props': { children: 'children', hasChildren: 'hasChildren' }, 'row-key': 'id', }, tableListeners: { // Dytable监听事件 select: (selection, row) =&gt; { this.selectTable(selection, row) }, 'select-all': (selection) =&gt; { this.selectTableAll(selection) }, }, selects: [], selectlist: [1, 2, 3], formInline: {}, tableData: [ { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { id: 2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', }, { id: 3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', children: [ { id: 31, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', }, { id: 32, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', }, { id: 33, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', }, { id: 34, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', }, { id: 35, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', }, { id: 36, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', }, ], }, { id: 4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', }, ], columns: [ { type: 'selection', }, { label: 'id', prop: 'id', }, { label: 'date', prop: 'date', }, { label: 'name', prop: 'name', }, { label: 'address', prop: 'address', }, { label: '操作', prop: 'control', slot: true, }, ], } }, methods: { toggleAllSelection() { this.$refs.myDyTable.toggleAllSelection() }, cancelSelect() { let selects = [...this.$refs.myDyTable.$refs.DyTable.selection] selects.forEach((row) =&gt; { this.$refs.myDyTable.toggleRowSelection(row, false) }) }, selectTableAll(selection) { this.selects = selection console.log('selection', selection) }, selectTable(selection, row) { this.selects = selection console.log('selection', selection) console.log( 'this.$refs.myDyTable.selection', this.$refs.myDyTable.$refs.DyTable.selection ) //获取表格选中所有项 }, }, }</code></pre>

页面列表

ITEM_HTML