avue操作列按钮显隐

 <avue-crud :option="optionParent"
                   :table-loading="treeLoading"
                   :data="dataParent"
                   :before-open="treeBeforeOpen"
                   :permission="permissionTreeList"
                   :row-style = "rowStyle"
                   v-model="treeForm">
</avue-crud>
rowStyle(column){
		// 根据条件隐藏显示
        if(column.row.parentId == "0"){
          this.optionParent.editBtn = false;
          this.optionParent.delBtn = false;
        }else{
          this.optionParent.editBtn = true;
          this.optionParent.delBtn = true;
        }
      }
Avue 框架中,实现表格拖拽排序功能主要依赖于 `columnSort` 配置项。通过启用该功能,用户可以对表格的进行拖拽排序,从而提升用户体验和表格的灵活性。以下是实现拖拽排序的具体配置方法和相关注意事项。 ### 启用拖拽排序功能 要启用拖拽排序功能,只需在 `avue-crud` 组件的 `option` 配置中设置 `columnSort: true`,并确保引入了必要的依赖库(如 `Sortable.js`)[^4]。具体代码如下: ```html <template> <avue-crud :option="option" :data="data"></avue-crud> </template> <script> export default { data() { return { data: [ { text1: '内容1-1', text2: '内容1-2' }, { text1: '内容2-1', text2: '内容2-2' }, { text1: '内容3-1', text2: '内容3-2' } ], option: { columnSort: true, // 启用拖拽排序 column: [ { label: '内容1', prop: 'text1' }, { label: '内容2', prop: 'text2' } ] } }; } }; </script> ``` ### 依赖库的引入 拖拽排序功能依赖于 `Sortable.js` 库,因此需要在页面中引入该库。可以通过 CDN 引入,也可以通过本地文件引入: ```html <script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script> ``` 如果使用的是本地文件,则需要将 `Sortable.min.js` 文件放置在项目中合适的位置,并通过相对路径引入。 ### 保存排序配置 如果希望将用户自定义排序配置保存到本地,可以结合 `tj-vue2-tools` 工具集实现。通过该工具集,可以将用户的配置(如、排序、冻结等)持久化存储到浏览器的 `localStorage` 中,从而在下次打开页面时恢复用户的个性化设置[^5]。以下是如何在 `main.js` 中配置 `tj-vue2-tools` 的示例: ```javascript import Vue from "vue"; import ElementUI from "element-ui"; import Avue from "@smallwei/avue"; import "@smallwei/avue/lib/index.css"; import "element-ui/lib/theme-chalk/index.css"; import axios from "axios"; import TjTools from "tj-vue2-tools"; const axiosOption = { headers: {} }; Vue.use(ElementUI); Vue.use(Avue); Vue.use(TjTools, { axios: axios, axiosOption: axiosOption }); ``` ### 注意事项 1. **依赖库版本**:确保引入的 `Sortable.js` 版本与 Avue 兼容,避免因版本问题导致功能异常。 2. **拖拽与行拖拽冲突**:如果同时启用了行拖拽功能,可能会与拖拽产生冲突,导致用户无法正常操作。可以通过调整配置或逻辑来避免冲突。 3. **数据持久化**:如果需要保存的排序状态,建议结合 `tj-vue2-tools` 或其他本地存储方案,确保用户配置不会丢失。 ###
评论 12
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值