1.表格el-table中某一列需要特殊样式

1
2
3
4
5
6
7
8
9
<el-table-column
   prop="types"
   label="数据库类型"
   width="150"
>
   <template slot-scope="scope">
   <span class="i">{{ scope.row.types }}</span>
   </template>
</el-table-column>

在需要修改样式的列下添加如上所示代码。slot-scope="scope"如字面意思，插槽。是VUE组件的一块HTML模板，这块模板显不显示，怎样显示由父组件决定。

scope相当于一行数据，scope.row相当于当前行的数据对象。通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。

一位博主的理解：el-table获取tableData后，内部形成了类似Excel的scope，因此可以通过它获取表格内的数据。

2.对话框el-dialog样式修改

1
2
3
4
5
6
7
8
9
10
11
12
<el-dialog 
  title="SQL请求错误列表" 
  :visible.sync="dialogTableVisible"
  width="79%"
  top="0"
  custom-class="dialogclass"
>
  <el-table :data="gridData">
     <el-table-column property="date" label="序号" width="150"></el-table-column>
     <el-table-column property="name" label="姓名" width="200"></el-table-column>
  </el-table>
</el-dialog>

文档中写custom-class是dialog的自定义类名，如上所示用法。

1
2
3
4
5
6
7
8
9
10
<style lang="scss" scoped>
...
</style>
<style>
.dialogclass {
  height: 100%;
  float: right;
  margin-top: 0;
}
</style>

需要注意的是，需要在<style lang="scss" scoped>外额外写<style>

另外，目前遇到一个问题，即在el-dialog中top属性设为0（即margin-top:0），并将dialog高度设为100%后，会出现dialog可以滑动到屏幕上方外的区域。

通过在浏览器控制台挨个试过之后，罪魁祸首是原始样式见下，通过top将magin-top设为0后，底部仍有50px的距离。

1
2
3
.el-dialog {
    margin: 0 auto 50px; 
}

在自定义样式dialogclass中添加margin-bottom:0 !important;后完成。!important可以提高目前样式优先级。由此我们可以看出自定义样式优先级低于原样式。