封装ul组件，使用这个element组件库Table相关操作，Drawer 抽屉基本用法，element table表格选中事件。传参问题。elementui中的input修改宽度

Posted 2022-09-19 勇敢*牛牛

封装ul组件，使用这个element组件库Table相关操作，element table表格选中事件

封装ul组件

例如这个UI组件的两个按钮操作，现在需要将他们进行封装。

一般来说是这个先将组件库怼上去，然后按照自己的想法去封装一个组件，拆分成一个组件，在使用的时候其实就是将这个组件内容放在了这个位置，把相关的操作逻辑虽然也放在这个位置，ui组件大部分是信息是已经互通的，就不存在自己动手去操作组件间的传值操作。

那么相关的代码自己也就可以放在组件的js部分，就像这个组件一样，这个组件通信就是互通的。不用我们去考虑太多。

---

刚开始用这个组件库的时候，简直很不得劲，强行去理解是不行的，慢慢的看文档去接受。理解，习惯这个组件库的使用。

一个简单的后台页面排版就出来了。所以说，刚开始接触应该是不太会用，一定要去多常识，焦虑了就玩一下，回来接着肝，不能把自己喜欢的工作给干的不喜欢了。我现在很多时候就一下子投进去急的不行，其实你要是不会了，就看看，做一做自己会的那部分，或者出去走走。

---

现在就是对表格选项后面增添一个选择框：
查看文档是只需要在el-table表格中添加一项就好，但是这个组件对我来就在组件传值和事件绑定上。

<el-table-column type="selection"></el-table-column>

然后给table绑定事件：
注意看他的事件函数是没有传入实参的。

<el-table :data="tableData" style="width: 100%" @select="select">

---

而方法确有两形参：
那就很无赖的试错之后记住，这种组件的事件用法

select(row,selection) 
    console.log(row);/*数组 : 选中的每一行数据对象存在数组中*/
    console.log(row.length);/*可以根据数组长度判断是否被全选，或者判断是否有选中*/
    console.log(selection);/*对象：当前操作被选中的这一行数据对象*/

绑定全选事件，依旧是没有实参传递，但是形参有
<el-table :data="tableData" style="width: 100%" @select="select" @select-all="selectAll">
selectAll(selection)
	console.log(selection);/*函数返回一个数组：选中的每一项数据对象*/

<el-table :data="tableData" style="width: 100%" @select="select" @select-all="selectAll" @selection-change="selectionChange">

selectionChange(selection)
	console.log(selection);/*数组：被选中/取消后的对象数组*/

---

主要使用的是ElementUI table表格

1. select 事件 当用户手动勾选数据行的 Checkbox 时触发的事件 参数selection, row
2. row-click 事件 当某一行被点击时会触发该事件 参数 row, column, event
3. selection-change 事件 当选择项发生变化时会触发该事件 参数 selection
4. clearSelection 方法 用于多选表格，清空用户的选择
5. toggleRowSelection 方法用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） 参数row,selected

---

Drawer 抽屉基本用法：

<el-button size="mini"  @click="drawer = true" type="primary" style="margin-left: 16px;">增添</el-button>
//按钮控制抽屉的显示
<el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" >
	<h1>添加属性</h1>
</el-drawer>

++++++++++++++++++++++

data() 
   return 
       drawer: false,
   ;
,

:visible.sync="drawer"：双向绑定，控制显示开关；
:with-header="false"：取消标题title的显示，如果不写，显示标题，显示iocn-（x）；

---

elementui中的input修改宽度

<style lang="scss" scoped>
    ::v-deep
        .el-input__inner
            width: 200px;
           margin-left: 30px;
        
    
</style>

---

对于样式的修改，一直推荐于使用样式穿透修改。

遇到这个盒子上下位置占位，可以使用父级元素div包裹起来，然后对这个盒子进行display：flex布局，强制拉伸成一行，进行修改。