這篇文章主要介紹了element帶選擇表格將表頭復選框改成文字的方法,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
十余年的龍州網站建設經驗,針對設計、前端、開發、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。營銷型網站的優勢是能夠根據用戶設備顯示端的尺寸不同,自動調整龍州建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現優雅布局與設計,從而大程度地提升瀏覽體驗。創新互聯從事“龍州網站設計”,“龍州網站推廣”以來,每個客戶項目都認真落實執行。
方法一:使用表格屬性:header-cell-class-name 表格界面代碼
<el-table ref="multipleTable" :data="tableData" :header-cell-class-name="cellclass" style="width: 100%"> <el-table-column type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" > </el-table-column> </el-table>
對應js
data() { 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{ display:none; position:relative; } .el-table /deep/.DisabledSelection .cell:before{ content:"選擇"; position:absolute; right 11px; }
/deep/的作用:如果你使用了別人的組件或者自己開發一個組件,有時候你修改一處就可能影響到別的地方,這個時候要么你不用別人的組件,自己重新封裝一個,但很多時候是不太現實的,所以就需要使用/deep/,既不影響到別的地方,又能修改子組件在當前的樣式。
方法二、使用表格列標題屬性:label-class-name
界面代碼
<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column label-class-name="DisabledSelection" type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table>
對應CSS
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{ display:none; position:relative; } .el-table /deep/.DisabledSelection .cell:before{ content:"選擇"; position:absolute; right 11px; }
方法三:使用document.querySelector() 界面代碼
<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table>
對應js
mounted(){ this.$nextTick(()=>{ this.init(); }) }, methods: { init(){ document.querySelector(".el-checkbox__inner").style.display="none"; document.querySelector(".cell").innerHTML = '選擇' } }
方法四:不使用selection選擇列,重寫列使用checkbox
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="選擇" width="50"> <template slot-scope="scope"> <el-checkbox></el-checkbox></template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>
方法五:直接通過CSS樣式修改
.el-table__header .el-table-column--selection .cell .el-checkbox { display:none } .el-table__header .el-table-column--selection .cell:before { content: "選擇"; }
感謝你能夠認真閱讀完這篇文章,希望小編分享的“element帶選擇表格將表頭復選框改成文字的方法”這篇文章對大家有幫助,同時也希望大家多多支持創新互聯,關注創新互聯行業資訊頻道,更多相關知識等著你來學習!
新聞名稱:element帶選擇表格將表頭復選框改成文字的方法
文章網址:http://m.newbst.com/article44/ghoghe.html
成都網站建設公司_創新互聯,為您提供ChatGPT、網站營銷、靜態網站、企業網站制作、網站策劃、做網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯