js vue 设置excel单元格样式_vue修改Element的el-table样式的4种方法

修改Element中的el-table样式，可以使用以下几种方法：

1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。

2. cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。

3. header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。

4. header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

示例代码如下：

:data="tableData"

height="300"

border

stripe="true"

:row-style="tableRowStyle"

:header-cell-style="tableHeaderColor"

style="width: 100%">

prop="tag"

label="tag"

width="150">

prop="confidence"

label="confidence"

width="180">

prop="category_tag_level"

label="category_tag_level">

export default{

data () {

return {

tableData: [{

tag: '体育',

confidence: '0.8213628173213',

category_tag_level: '123'

}, {

tag: '体育',

confidence: '0.8213628173213',

category_tag_level: '123'

}, {

tag: '体育',

confidence: '0.8213628173213',

category_tag_level: '123'

}, {

tag: '体育',

confidence: '0.8213628173213',

category_tag_level: '123'

}, {

tag: '体育',

confidence: '0.8213628173213',

category_tag_level: '123'

}, {

tag: '体育',

confidence: '0.8213628173213',

category_tag_level: '123'

}, {

tag: '体育',

confidence: '0.8213628173213',

category_tag_level: '123'

}]

}

},

methods:{

//设置表格行的样式

tableRowStyle({row,rowIndex}){

return 'background-color:pink;font-size:15px;'

},

//设置表头行的样式

tableHeaderColor({row,column,rowIndex,columnIndex}){

return 'background-color:lightblue;color:#fff;font-wight:500;font-size:20px;text-align:center'

}

}

}

效果如下所示：

以上就是vue修改Element的el-table样式的4种方法的详细内容，更多关于vue修改Element的el-table样式的资料请关注脚本之家其它相关文章！