一、table表格循环渲染
1.vue2.0中循环渲染表格并加 插槽
（1）将<el-table-column>标签的属性定义为一个数组columns,循环渲染数据。
（2）由于v-for和v-if不能作用在同一标签上，所以要用<template>包裹所有的<el-table-column>。
（3）循环渲染<<el-table-column>标签，并将需要添加插槽的单独领出来。
<el-table :data="tableData">
<!-- 用template包裹table-column,不要把v-for和v-if写到一个标签上 -->
<template v-for="item in columns" :key="item.prop">
<!-- 如果是要加插槽的需要单独判断 -->
<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>
<!-- 不加插槽的循环渲染 -->
<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: '机构名称',
},
];
或者简单来写：
<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结合jsx表格渲染 与 插槽的使用
（1）使用jsx语法，在<el-table>标签内调用一个函数，函数返回值是<el-table-column>结构。
（2）遍历定义好的colums数组，循环渲染<el-table-columns>标签。
（3）可以在<el-table-columns>标签的HTML结构中使用jsx语法，判断是否需要添加插槽。
（4）使用jsx语法添加插槽，插槽内容是一个回调函数，函数返回值是要渲染的HTML结构，函数参数可以将当前行的数据传递给HTML结构。
（5）函数返回值是一个函数子组件。
首先，在<el-table>标签内放入一个函数，返回值就是<el-table-column>结构
<el-table
data={tableList}
row-key="id"
>
{columnList()}
</el-table>
遍历columns循环渲染<el-table-column>，并区分哪些标签需要插槽
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} />
));
};
最后插槽使用函数子组件进行渲染
const ColumnItem = (props) => {
return <div>{props.prop}</div>;
};
二、vue3结合jsx
1.render()函数中使用this
2.插槽的使用注意点
（1）自定义插槽：如表格中的某列需要自定义内容
① 用v-slots指定插槽内容，值为一个 函数。
② 函数的 参数 是当前列的所有数据 scope，函数 返回值 是一个 函数式组件。
<el-table-column v-slots={(scope) => <ColumnItem prop={item.prop} {...scope.row}/>
const ColumnItem = (props) => {
return <div>{props.prop}</div>;
};
③ <el-table-column />标签可能是循环渲染的，因为每一列都有对应的 prop属性；也有可能是单独写的，比如最后一列的操作项。
<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插槽，添加后缀内容
① 用v-slots指定插槽内容，值为一个 对象。
② key是插槽名，value是一个函数，函数返回值就是插槽内容。
<el-input v-slots={slots} />
const slots = {
append: () => '.com',
};
3. vue3结合jsx时的数据绑定
v-model绑定数据时用 "state.xxx" 的形式，不要直接 v-model={xxx} ，否则可能会出现数据无法实现双向绑定的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数据
1.setup()函数要接收props参数。
2.setup()函数要在return 中将props返回。
3.render()函数中在this中接收props。
5. 类名
1.在vue中使用jsx时，类名用class 和 className 都不会 报错，但是 className可能不生效。
2.为单个元素添加多类名：<img className={tree-item ${item.id === state.orgId ? 'activeTreeItem' : ''}} />
6.vue 结合 jsx 的动态表单校验
（1）动态生成的表单的 校验规则 rules属性，要单独写到<el-form-item>标签上。
（2）重点是 prop属性，有特殊写法。
① 其中，state.followForm 是<el-form>绑定的表单对象。
② state.followForm.url是一个数组，用来存放动态生成的链接地址，数组元素就是 字符串。
③ prop属性直接用 数组名 url（字符串） 加上 .index（动态索引）。
const state = reactive({
followForm: {
url: ['', ''], // 存放链接的数组，初始默认有两个输入框
},
})
<el-form model={state.followForm}>
{
state.followForm.url.map((item, index) => (
<el-form-item
label="数据链接："
prop={`url.${index}`} // 1.注意prop属性的写法。
rules={{ required: true, message: '请输入数据链接并以http开头', trigger: 'blur' }} // 2.校验规则单独写。
>
<el-input
v-model={state.followForm.url[index]} // 3.注意input框数据的绑定。
onBlur={() => limitUrl(index)}
/>
</el-form-item>
))
}
</el-form>
7.vue结合jsx不再分<template></template>、<script></script>、<style></style>标签。
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)}> 普通机构 </div>
</div>
</div>
);
},
});
