当前位置: 首页 > Web前端 > vue.js

带有选择表单的元素将标题中的复选框更改为文本

时间:2023-03-31 22:38:16 vue.js

方法一:使用表格属性:header-cell-class-name表格接口代码{{scope.row.date}}对应jsdata(){return{tableData:[{date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-02',name:'王小虎',address:'金沙,上海市普陀区江路1518弄'}],multipleSelection:[]}},methods:{cellclass(row){if(row.columnIndex===0){return'DisabledSelection'}}}CSS.el-table/deep/.DisabledSelection.cell.el-checkbox__inner{显示:无;position:relative;}.el-table/deep/.DisabledSelection.cell:before{content:"Selection";它会影响其他地方。这时候要么不用别人的组件,自己重新打包一个,但往往不现实,所以需要使用/deep/,既不影响其他地方,又可以修改当前样式的子组件。方法二、使用表格列标题属性:label-class-name接口代码{{scope.row.date}}对应CSS.el-table/deep/.DisabledSelection.cell。el-checkbox__inner{显示:无;position:relative;}.el-table/deep/.DisabledSelection.cell:before{content:"选择";位置:绝对;right11px;}方法三:使用document.querySelector()界面代码{{scope.row.日期}}对应jsmounted(){this.$nextTick(()=>{this.init();})},methods:{init(){document.querySelector(".el-checkbox__inner").style.display="无";document.querySelector(".cell").innerHTML='Selection'}}方法四:不选择选中列,使用checkbox重写列方法五:直接通过CSS样式修改.el-table__header.el-table-column--selection.cell.el-checkbox{display:none}.el-table__header.el-table-column--selection.cell:before{内容:“选择”;}