桂林建设网站公司,php网站架设教程,万网做的网站咋样,网站开发去哪里找工作要在电脑端使用 fixed 固定列#xff0c;而在移动端不使用#xff0c;可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码#xff1a; templateel-tableel-table-columnpropnamelabelName:fixedisDesk… 要在电脑端使用 fixed 固定列而在移动端不使用可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码 templateel-tableel-table-columnpropnamelabelName:fixedisDesktop ? : true/el-table-columnel-table-columnpropagelabelAge/el-table-column!-- 其他列 --/el-table
/templatescript
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; // 设置阈值这里假设大于等于 768px 的宽度为电脑端}}
};
/script 在上面的示例中我们使用 isDesktop 数据属性来判断当前设备是否为电脑端。通过监听窗口的 resize 事件动态更新 isDesktop 的值。然后在 el-table-column 的 fixed 属性上我们使用了动态绑定的方式来根据 isDesktop 的值设置 fixed 属性。 这样在电脑端时isDesktop 为 truefixed 属性为 true(可设置true, left, right)列将被固定而在移动端时isDesktop 为 falsefixed 属性为空列将不被固定。 问题电脑端正常固定显示手机端这两列字段不显示了 方法解决不清楚什么原因造成的写个笨方法 templateel-tableel-table-columnpropnamelabelName:fixedisDesktop ? : true/el-table-column// 重复写一遍列字段在手机端时显示el-table-columnv-if!isDesktoppropnamelabelName/el-table-columnel-table-columnpropagelabelAge/el-table-column!-- 其他列 --/el-table
/template
