一针肥、table表格循環(huán)渲染
1.vue2.0中循環(huán)渲染表格并加 插槽
（1）將<el-table-column>標(biāo)簽的屬性定義為一個(gè)數(shù)組columns,循環(huán)渲染數(shù)據(jù)书幕。
（2）由于v-for和v-if不能作用在同一標(biāo)簽上，所以要用<template>包裹所有的<el-table-column>凡橱。
（3）循環(huán)渲染<<el-table-column>標(biāo)簽小作，并將需要添加插槽的單獨(dú)領(lǐng)出來。
<el-table :data="tableData">
<!-- 用template包裹table-column,不要把v-for和v-if寫到一個(gè)標(biāo)簽上 -->
<template v-for="item in columns" :key="item.prop">
<!-- 如果是要加插槽的需要單獨(dú)判斷 -->
<el-table-column
v-if="item.prop==='name'"
:width="item.width"
:label="item.label"
:align="item.align"
>
<template v-slot="{row}">
<div>
{{row.name}}hahah
</div>
</template>
</el-table-column>
<!-- 不加插槽的循環(huán)渲染 -->
<el-table-column
v-else
:prop="item.prop"
:width="item.width"
:label="item.label"
:align="item.align"
>
</el-table-column>
</template>
</el-table>
const columns = [
{
prop: 'id',
width: 120,
label: 'ID',
align: 'center',
},
{
prop: 'name',
width: 180,
label: '機(jī)構(gòu)名稱',
},
];
或者簡單來寫：
<el-table-column
v-for="item in columns"
:key="item.prop"
:prop="item.prop"
:width="item.width"
:label="item.label"
:align="item.align"
:sortable="item.sortable"
>
<template v-slot="{row}" v-if="item.prop==='name'">
<div>
這是自定義name:{{row.name}}
</div>
</template>
<template v-slot="{row}" v-else-if="item.prop==='id'">
<div>
這是自定義id: {{row.id}}
</div>
</template>
</el-table-column>
2.vue3.0結(jié)合jsx表格渲染 與 插槽的使用
（1）使用jsx語法稼钩，在<el-table>標(biāo)簽內(nèi)調(diào)用一個(gè)函數(shù)顾稀，函數(shù)返回值是<el-table-column>結(jié)構(gòu)。
（2）遍歷定義好的colums數(shù)組坝撑，循環(huán)渲染<el-table-columns>標(biāo)簽静秆。
（3）可以在<el-table-columns>標(biāo)簽的HTML結(jié)構(gòu)中使用jsx語法，判斷是否需要添加插槽巡李。
（4）使用jsx語法添加插槽抚笔，插槽內(nèi)容是一個(gè)回調(diào)函數(shù)，函數(shù)返回值是要渲染的HTML結(jié)構(gòu)侨拦，函數(shù)參數(shù)可以將當(dāng)前行的數(shù)據(jù)傳遞給HTML結(jié)構(gòu)殊橙。
（5）函數(shù)返回值是一個(gè)函數(shù)子組件。
首先阳谍，在<el-table>標(biāo)簽內(nèi)放入一個(gè)函數(shù)蛀柴，返回值就是<el-table-column>結(jié)構(gòu)
<el-table
data={tableList}
row-key="id"
>
{columnList()}
</el-table>
遍歷columns循環(huán)渲染<el-table-column>，并區(qū)分哪些標(biāo)簽需要插槽
const columnList = () => {
return column.map((item) => (
['basic', 'account', 'org', 'dataScope', 'time'].includes(item.prop) ?
<el-table-column
prop={item.prop}
width={item.width}
label={item.label} key={item.prop}
v-slots={(scope) => <ColumnItem prop={item.prop} {...scope.row}/>}
/>
:
<el-table-column prop={item.prop} label={item.label} key={item.prop} align={item.align} />
));
};
最后插槽使用函數(shù)子組件進(jìn)行渲染
const ColumnItem = (props) => {
return <div>{props.prop}</div>;
};
二矫夯、vue3結(jié)合jsx
1.render()函數(shù)中使用this
2.插槽的使用注意點(diǎn)
（1）自定義插槽：如表格中的某列需要自定義內(nèi)容
① 用v-slots指定插槽內(nèi)容鸽疾，值為一個(gè) 函數(shù)。
② 函數(shù)的 參數(shù) 是當(dāng)前列的所有數(shù)據(jù) scope训貌，函數(shù) 返回值 是一個(gè) 函數(shù)式組件制肮。
<el-table-column v-slots={(scope) => <ColumnItem prop={item.prop} {...scope.row}/>
const ColumnItem = (props) => {
return <div>{props.prop}</div>;
};
③ <el-table-column />標(biāo)簽可能是循環(huán)渲染的，因?yàn)槊恳涣卸加袑?yīng)的 prop屬性递沪；也有可能是單獨(dú)寫的豺鼻，比如最后一列的操作項(xiàng)。
<el-table data={state.tableData} v-slots={state.tableSlots} onSortChange={sortChange} ref="tableRef">
{initColumns()}
<el-table-column label='操作' v-slots={(scope) => action(scope)}></el-table-column>
</el-table>
// 表格操作欄插槽
const action = (scope) =>
<span className='button-link' style={{ cursor: 'pointer' }} onClick={() => actionHistory(scope)}>操作記錄</span>;
（2）有名字的插槽：如input框通過append插槽款慨，添加后綴內(nèi)容
① 用v-slots指定插槽內(nèi)容儒飒，值為一個(gè) 對象。
② key是插槽名檩奠，value是一個(gè)函數(shù)桩了，函數(shù)返回值就是插槽內(nèi)容附帽。
<el-input v-slots={slots} />
const slots = {
append: () => '.com',
};
3. vue3結(jié)合jsx時(shí)的數(shù)據(jù)綁定
v-model綁定數(shù)據(jù)時(shí)用 "state.xxx" 的形式，不要直接 v-model={xxx} 井誉，否則可能會(huì)出現(xiàn)數(shù)據(jù)無法實(shí)現(xiàn)雙向綁定的bug蕉扮。
<el-radio-group v-model={state.timeRadio} size="large" onChange={timeChange}>
<el-radio-button label='1' >近30天</el-radio-button>
<el-radio-button label='2' >近7天</el-radio-button>
</el-radio-group>
4. 在jsx中使用props數(shù)據(jù)
1.setup()函數(shù)要接收props參數(shù)。
2.setup()函數(shù)要在return 中將props返回颗圣。
3.render()函數(shù)中在this中接收props喳钟。
5. 類名
1.在vue中使用jsx時(shí)，類名用class 和 className 都不會(huì) 報(bào)錯(cuò)在岂，但是 className可能不生效奔则。
2.為單個(gè)元素添加多類名：<img className={tree-item ${item.id === state.orgId ? 'activeTreeItem' : ''}} />
6.vue 結(jié)合 jsx 的動(dòng)態(tài)表單校驗(yàn)
（1）動(dòng)態(tài)生成的表單的 校驗(yàn)規(guī)則 rules屬性，要單獨(dú)寫到<el-form-item>標(biāo)簽上洁段。
（2）重點(diǎn)是 prop屬性应狱，有特殊寫法共郭。
① 其中祠丝，state.followForm 是<el-form>綁定的表單對象。
② state.followForm.url是一個(gè)數(shù)組除嘹，用來存放動(dòng)態(tài)生成的鏈接地址写半，數(shù)組元素就是 字符串。
③ prop屬性直接用 數(shù)組名 url（字符串） 加上 .index（動(dòng)態(tài)索引）尉咕。
const state = reactive({
followForm: {
url: ['', ''], // 存放鏈接的數(shù)組叠蝇，初始默認(rèn)有兩個(gè)輸入框
},
})
<el-form model={state.followForm}>
{
state.followForm.url.map((item, index) => (
<el-form-item
label="數(shù)據(jù)鏈接："
prop={`url.${index}`} // 1.注意prop屬性的寫法。
rules={{ required: true, message: '請輸入數(shù)據(jù)鏈接并以http開頭', trigger: 'blur' }} // 2.校驗(yàn)規(guī)則單獨(dú)寫年缎。
>
<el-input
v-model={state.followForm.url[index]} // 3.注意input框數(shù)據(jù)的綁定悔捶。
onBlur={() => limitUrl(index)}
/>
</el-form-item>
))
}
</el-form>
7.vue結(jié)合jsx不再分<template></template>、<script></script>单芜、<style></style>標(biāo)簽蜕该。
import { defineComponent, reactive, getCurrentInstance,} from 'vue';
import './index.scss';
export default defineComponent({
setup() {
const { proxy } = getCurrentInstance();
const state = reactive({
activeKey: 0, // 一級tab欄
});
// 一級tab欄切換
const topTabsClick = (key, e) => { };
return {
state,
typeChange,
};
},
render() {
const { state,typeChange } = this;
return (
<div className="data-analyse-wrapper" >
<div class="yc-first-tabs">
<div onClick={(e) => topTabsClick(0, e)}> 普通機(jī)構(gòu) </div>
</div>
</div>
);
},
});
