淘客推廣有用嗎店鋪seo是什么意思
? ? ? ?要在電腦端使用 fixed 固定列,而在移動端不使用,可以使用 CSS 媒體查詢結(jié)合 Vue 的動態(tài)綁定來實現(xiàn)。以下是一個示例代碼:
<template><el-table><el-table-columnprop="name"label="Name":fixed="isDesktop ? '' : 'true'"></el-table-column><el-table-columnprop="age"label="Age"></el-table-column><!-- 其他列 --></el-table>
</template><script>
export default {data() {return {isDesktop: false};},beforeDestroy() {window.removeEventListener('resize', this.checkDeviceType);},mounted() {this.checkDeviceType();window.addEventListener('resize', this.checkDeviceType);},methods: {checkDeviceType() {this.isDesktop = window.innerWidth >= 768; // 設(shè)置閾值,這里假設(shè)大于等于 768px 的寬度為電腦端}}
};
</script>
? ? ? ?在上面的示例中,我們使用 isDesktop 數(shù)據(jù)屬性來判斷當前設(shè)備是否為電腦端。通過監(jiān)聽窗口的 resize 事件,動態(tài)更新 isDesktop 的值。然后,在 el-table-column 的 fixed 屬性上,我們使用了動態(tài)綁定的方式來根據(jù) isDesktop 的值設(shè)置 fixed 屬性。
? ? ? ?這樣,在電腦端時,isDesktop 為 true,fixed 屬性為 'true'(可設(shè)置true, left, right),列將被固定;而在移動端時,isDesktop 為 false,fixed 屬性為空,列將不被固定。
問題:電腦端正常固定顯示,手機端這兩列字段不顯示了
方法解決:不清楚什么原因造成的,寫個笨方法
<template><el-table><el-table-columnprop="name"label="Name":fixed="isDesktop ? '' : 'true'"></el-table-column>// 重復寫一遍列字段,在手機端時顯示<el-table-columnv-if="!isDesktop"prop="name"label="Name"></el-table-column><el-table-columnprop="age"label="Age"></el-table-column><!-- 其他列 --></el-table>
</template>