1. 設(shè)置 屏幕最小 寬度

html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
    /* 設(shè)置屏幕最小寬度 */
    min-width: 1100px;
}

當(dāng)打開(kāi)控制臺(tái)后， 屏幕寬度小于最小寬度時(shí)，則會(huì)添加滾動(dòng)條

<br />

2. 將兩個(gè)數(shù)組拼接到一個(gè)數(shù)組

// 展開(kāi)運(yùn)算符可以合并兩個(gè)數(shù)組  ...arr1 表示將 arr1 里的數(shù)據(jù)全部展開(kāi)并添加到一個(gè)新的數(shù)組里
const arr1 = [1, 2]
const arr2 = [3, 4]
const all = [...arr1, ...arr2]
console.log(all)
// all  [1, 2, 3, 4]

<br />

3. 表格 tree-table 樹(shù)形表格組件 tree-table 地址：

npm i vue-table-with-tree-grid -S   版本 0.2.4

// vue-table-with-tree-grid  直接搜索會(huì)有 文檔教程
// main.js 中 導(dǎo)入
// 引入表格
import TreeTable from 'vue-table-with-tree-grid'
// 注冊(cè)成為全局組件
Vue.component('tree-table', TreeTable)

// vue 文件中使用
<tree-table></tree-table>

image

<br />

4. 作用域插槽 template

<template slot="opt" slot-scope="scope">
                <pre>
                    {{scope.row}}
                </pre>
            </template>

// <pre></pre> 文件預(yù)覽   slot 表示 作用域插槽的 名字

<br />

5. 作用域插槽 template 常用在表單里面

//  scope.row  表示 一整行的數(shù)據(jù)
<el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mine" type="primary" icon="el-icon-edit"
                  @click="showEditDialog((scope.row.attr_id))">編輯</el-button
                >
                <el-button size="mine" type="danger" icon="el-icon-delete"
                  >刪除</el-button
                >
              </template>
            </el-table-column>