vue相关笔记

Vue + element.js +Avue.js 笔记

1. 调整搜索栏
   js部分

export const option = {
border: true,
index: true,
indexLabel: '序号',
indexWidth: 120, // 序号列宽度
stripe: true,
menuAlign: 'center',
align: 'center',
addBtn: false,
editBtn: false,
delBtn: false,
menu: false, // 隐藏表格操作列
column: [
// {
//
label: 'id',
//
prop: 'vedioId'
// },
{
label: '姓名',
prop: 'name',
hide: true, // 是否隐藏该列
search: true, // 开启搜索栏
searchLabelWidth: 100, // 搜索栏左边文案宽度
minWidth: 100,	// 
labelWidth: 120,	// 
searchSpan: 4,
// 搜索框宽度
searchslot: true, // 搜索自定义
sortable: true, // 开启列排序
formatter: function (row, value, label, column) {
// 展示多个结果
return row.userName + '<br />' + row.mobile
}
}
]
}

// 表格定义某个列属性
// width: “100%”,//表格宽度
// calcHeight: “auto”,//表格高度差（主要用于减去其他部分让表格高度自适应）
// height: “auto”,//表格高度
// maxHeight: “auto”,//表格最大高度
// border: true,//是否显示表格边框
// expand: false,//是否展开折叠行
// index: false,//是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数）
// indexLabel: “#”,//序号的标题
// stripe: true,//是否显示表格的斑马条纹
// showHeader: true,//是否显示表格的表头
// //defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段，order排序方式
// align: “center”,//表格列对其方式left/center/right
// menu: true,//是否显示操作菜单栏
// menuWidth: 240,//操作菜单栏的宽度
// menuAlign: “left”,//菜单栏对齐方式left/center/right
// searchSize: “small”,//搜索控件的大小small/mini
// columnBtn: true,//列显隐按钮
// refreshBtn: true,//刷新按钮
// addBtn: true,//添加按钮
// searchBtn: true,//搜索显隐按钮（当column中有搜索的属性，或则searchslot为true时自定义搜索启动起作用）
// editBtn: true,//行内编辑按钮
// delBtn: true,//行能删除按钮
//列属性
// label:“租户ID”,//列名称
// prop:“id”,//列字段
// placeholder:“请输入租户ID”,//控件提示输入语句
// align:“left”,//列的对其方式，覆盖table的align
// //width://列宽度
// minWidth:“auto”,//列最小宽度
// sortable:false,//排序
// hide:true,//隐藏列 表格起作用
// span:12,//表单栅列
// //precision:2,//数字框输入精度（当type为number时）
// search:false,//是否支持搜索
// type:“input”,//input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree
// //maxRows:4,//最大行（当type为textarea）
// //minRows:2,//最小行（当type为textarea）
// //multiple:false,多选（当type为select/tree时）
// //format:"",//显示值时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date
// //valueFormat:"",//真实值的时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates)
// clearable:true,//表单清空
// size:“medium”,//表单大小medium/small/mini
// editDisabled:false,//表单编辑时是否禁止
// editDisplay:false,//表单编辑是否可见
// addDisabled:false,//表单编辑时是否禁止
// addDisplay:false,//表单编辑是否可见
// slot:false,//列自定义 支持自定义列
// formslot:false,//表单自定义
// // fixed:true,//冻结列
// formWidth:“auto”,//表单宽度
// formHeight:“auto”,//表单行高度
// overHidden:false,//超出隐藏
// //rules://表单规则,参考ele表单规则配置Object
// //dicData://传入本次需要的静态字典（在column中dicData写对象key值即可加载）
// //dicMethod://传入字典的请求方式
// //dicQuery://传入字典的请求参数Object
// //dicUrl://字典的网络请求接口（例如配置/xxx/xx/{{key}},这样的格式，在column中dicData自动匹配prop字段名）

vue部分

vue 给表格的某个字段实时更新

this.$set(this.tableList, index, this.tableList[index])

vue 的数组中删除某个对象属性的对象

let arr = [{userId: 'abc',userName: '李涛涛'},{userId: 'bbb',userName: '刘七七'}]
let index = arr.findIndex((value) => value.userId === tag.userId)
// let index = arr.indexOf(user)
console.log(index)
arr.splice(index, 1)

vue 中js 选择内容多个地方引用

编写 js: unitOption .js
export const unitOption = [
{
lable: '件',
value: 1
},
{
lable: '盒',
value: 2
},
{
lable: '箱',
value: 3
}
]
引用
import { unitOption } from '@/crud/prod/unitOption'
使用：
<el-select
v-model="dataForm.unit"
filterable
allow-create
clearable
>
<el-option
v-for="item in unitOption"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>

avue,
搜索组件中时间选择

label: '回复时间',
prop: 'recTime',
width: '200',
type: 'daterange', // 时间区间或者时间范围
// searchValue: [], 
format: 'yyyy-MM-dd HH:mm:ss',
// 这是组件展示的日期格式
valueFormat: 'yyyy-MM-dd HH:mm:ss',
// 这是组件value值的格式
searchSpan: 8, // 搜索内容长度
searchRange: true, // 搜索范围
searchClearable: true, //可清空搜索
searchSlot: true, // 搜索自定义
search: true // 开启搜索

最后

以上就是糟糕书本为你收集整理的vue相关笔记的全部内容，希望文章能够帮你解决vue相关笔记所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。