vue超实用笔记记录

vue超实用笔记记录

---

vue超实用笔记记录：

vue实用

1** 按钮与后台数据库的链接

2** n-card:列 /n-card 表头，card组件，可以通过数据绑定的方式动态更新表头
例：
1） 首先，在data属性中定义一个变量来存储后台传回的数据，比如称为

headerList
data()
{
return{
		headerList: []
		 }}

2） 然后，在Card的头部插槽中使用v-for指今遍历headerlist数组，动态生成表头

<el-card>
		<div slot = “header”>
			<div v-for =”header in headerList” : key 
=”header.id”>{{header.name}}</div>
		</div>
</el-card>

3）最后，通过后台接口获取到据后，将数据赋值给headerList变量，即可实现动态更新, 在获取到数据后，调用fetchData方法获取并更新表头数据人而实现动态更新。

methods: {
fetchData(){
//发起后台请求获取数据
//假设通过axios发送请求，请求成功后将数据赋值给headerList
axios.get('/api/header').then(response=>
this.headerList=response.data;//将后台返回的数据赋值给headerList
}).catch(error=>{
console.error(error);
 });
 }},
mounted(）
{ this.fetchData（）：
}//在组件挂载完成后调用fetchData方法，获取并更新表头数据

3** n-input：多行文本minRow，还可以有提示的设置

4** routerlink to链接的跳转

<RouterLink :to="`/data/${id}/di/shareholder`">
<NButton type="info">
填写“信息表”
</NButton>
</RouterLink>

5** span设置红色提醒

</NFormItem>
<p><span text-red>情况记录。</span></p>
<NFormItem label="记录" path="inconsistency_describe">

6** 常用组件：布尔型Boolean（），数字型Number()，文本v-text/ n-input/v-model，折叠collapse，选择Select（）

7** 保存按钮：handleupdate，tables\shareholder 一对多，编辑按钮、删除按钮（）警告的设置），新建的按钮

const handleUpdate = (e: Event) => {
e.preventDefault()
formRef.value
?.validate((errors) => {
if (errors)
window.$message?.error('请检查表单', { duration: 3000 })
})
.then(async () => {
await dm.update()
await dm.clear()
window.$message?.success('保存成功')
await init()
})
}

<n-space justify="end">
<NButton type="primary" :disabled="isdisabledall" @click="handleUpdate">
保存
</NButton>
</n-space>

8** 初始化：更新数据

9** 选择：索引对应逻辑

10** 数据库id链接：string

11** 生成文件的逻辑：
exportDoc(输入文档模板,输出文档,输出字段参数)
exportExcel（）（表头，数据，生成表格名称）

12** 导入导出的按钮handleexport,header/headerConvert表头导入导出

const handleExport = () => {
exportExcel(header, multibool(analogability.analog), 'export_analog.xlsx')
}
const handleChange = (data: { file: Upload }) => {
importExcel<Analog>(header, data.file).then(async (data) => {
window.$message?.success('开始导入')
showSpin.value = true
data = invmultibool(data)
for (const comp of data) {
if (comp.id) {
analogability.analog = comp
await analogability.updateAnalog()
}
else {
await analog.createAnalog(comp)
dm.dim.analog.push(analog.analog.id)
await dm.update()
}}
await analog.listAnalog(props.fid)
showSpin.value = false
window.$message?.success('导入成功')
await init()
})}
init()
<p v-if="isprjleader || isdimmember || isadmin">
<NButton type="success" @click="handleExport">
导出表格
</NButton>
</p>
<p v-if="isdimmember || isadmin">
<n-upload :max="1" :disabled="isdisabledall" @change="handleChange" @remove.stop="">
<NButton type="warning" :disabled="isdisabledall">
导入表格
</NButton>
</n-upload>