9 . 设置屏幕最小宽度 将两个数组拼接到一个数组中（展开运算符） tree-table 树形表格组件 作用域插槽template

1. 设置 屏幕最小 宽度

html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
    /* 设置屏幕最小宽度 */
    min-width: 1100px;
}

当打开控制台后， 屏幕宽度小于最小宽度时，则会添加滚动条

<br />

2. 将两个数组拼接到一个数组

// 展开运算符可以合并两个数组  ...arr1 表示将 arr1 里的数据全部展开并添加到一个新的数组里
const arr1 = [1, 2]
const arr2 = [3, 4]
const all = [...arr1, ...arr2]
console.log(all)
// all  [1, 2, 3, 4]

<br />

3. 表格 tree-table 树形表格组件 tree-table 地址：

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

// vue-table-with-tree-grid  直接搜索会有 文档教程
// main.js 中 导入
// 引入表格
import TreeTable from 'vue-table-with-tree-grid'
// 注册成为全局组件
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> 文件预览   slot 表示 作用域插槽的 名字

<br />

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

//  scope.row  表示 一整行的数据
<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>