做网站要租服务器,麻江网站建设,做外贸的人经常用什么网站,石家庄网站建设全包表格自定义表头的方式 多选框表头换文字 请查看上篇博客#xff1a;http://t.csdn.cn/69De2 文字换按钮 render-header render-header方法详情 Table-column Attributes 参数说明类型可选值默认值render-header列标题 Label 区域渲染使用的 FunctionFunction(h, { column, $in…表格自定义表头的方式 多选框表头换文字 请查看上篇博客http://t.csdn.cn/69De2 文字换按钮 render-header render-header方法详情
Table-column Attributes 参数说明类型可选值默认值render-header列标题 Label 区域渲染使用的 FunctionFunction(h, { column, $index })—— 代码
templatediv classBoxdiv!-- :header-cell-class-namecellClass --el-table refmultipleTable :datatableData :header-cell-class-namecellClass tooltip-effectdarkstylewidth: 500px selection-changehandleSelectionChangeel-table-column typeselection width55/el-table-columnel-table-column label日期 width120template slot-scopescope{{ scope.row.date }}/template/el-table-columnel-table-column label姓名 propname :render-header(h, obj) renderHeader(h, obj, 你的参数)width120el-button sizemini clickhandleEdit(scope.$index, scope.row)修改姓名/el-button/el-table-columnel-table-column propaddress label地址 show-overflow-tooltip/el-table-column/el-table/div/div
/templatescript
export default {name: list,data () {return {tableData: [{date: 2023-09-03,name: bug天选之子,address: https://blog.csdn.net/weixin_70245286?spm1000.2115.3001.5343}, {date: 2023-09-03,name: bug天选之子,address: https://blog.csdn.net/weixin_70245286?spm1000.2115.3001.5343}, {date: 2023-09-03,name: bug天选之子,address: https://blog.csdn.net/weixin_70245286?spm1000.2115.3001.5343}, {date: 2023-09-03,name: bug天选之子,address: https://blog.csdn.net/weixin_70245286?spm1000.2115.3001.5343},],multipleSelection: [],}},methods: {// 选中的项handleSelectionChange (val) {this.multipleSelection val;console.log(选中的项:, this.multipleSelection);},// 修改多选框表头cellClass (row) {// 判断第几列if (row.columnIndex 0) {return disableSelection;}},// 自定义表头renderHeader (h, { column, $index }, type) {// console.log(列表加载就会触发, h, { column, $index }, type)console.log(column.label);let that this// 逻辑是 h() 括号里包裹标签 第一个参数是标签名 第二个是属性 第三个是标签内容 如果是多个标签需要包裹数组return h(div, [// 列名称// h(span, column.label),// 按钮h(el-button, {props: {type: primary,size: small,},style: color:#fff;,// class: { active: showSelectMore },// class: className,on: {// 各种事件触发click: function () {that.clickButton(type)}}}, 姓名)],)},// 按钮点击事件clickButton (type) {console.log(我点击了 type 的列)// this.downLoad()},handleEdit (row) {}},mounted () {}
}
/scriptstyle scoped
.Box {display: flex;justify-content: center;align-items: center;
}::v-deep.el-table .disableSelection .cell .el-checkbox__inner {display: none;position: relative;
}::v-deep.el-table .disableSelection .cell::before {content: 选项;position: absolute;right: 15px;
}::v-deep.el-table {border: 1px solid blue;
}
/style效果图 关键代码总结 // 在要修改的那一列加render-header属性
el-table-column label姓名 propname :render-header(h, obj) renderHeader(h, obj, 你的参数)/el-table-column
// methods中写方法
renderHeader (h, { column, $index }, type) {// console.log(列表加载就会触发, h, { column, $index }, type)console.log(column.label);let that this// 逻辑是 h() 括号里包裹标签 第一个参数是标签名 第二个是属性 第三个是标签内容 如果是多个标签需要包裹数组return h(div, [// 列名称// h(span, column.label),// 按钮h(el-button, {props: {type: primary,size: small,},style: color:#fff;,// class: { active: showSelectMore },// class: className,on: {// 各种事件触发click: function () {that.clickButton(type)}}}, 姓名)],)},
