##仅仅写了留着自己用,不加解释,要用的自己看代码,实现的应用场景
1.动态添加不同的输入框选择框时间选择器且支持联动实现多行新增附加校验;
2.实现点击编辑操作把span标签换成输入框选择框时间选择器实现编辑
3.能用判断条件实现按钮的启用禁用,内容颜色的改变,过滤器功能
4.可以配合表格配置实现列删除,列宽度配置,列的交换
5.勾选表格实现对按钮操作的控制
table组件
<template>
<div id="table">
<el-table
:ref="tableInfo.ref"
:data="formatData"
border
stripe
style="width: 100%"
@select="onTableSelect"
@selection-change="handleSelectionChange"
@header-dragend="colChange"
>
>
<!-- 表头 、表体-->
<template v-for="column in tableInfo.columns">
<el-table-column
v-if="column.type"
:fixed="column.fixed"
:key="column.desc+new Date()"
:label="column.name"
:sortable="column.sortable?'custom':false"
:type="column.type"
:width="column.width==undefined?'auto':column.width"
align="center"
/>
<el-table-column
v-if="!column.type"
:fixed="column.fixed"
:key="column.desc+new Date()"
:label="column.name"
:prop="column.desc"
:show-overflow-tooltip="column.tooltip?true:false"
:sortable="column.sortable?'custom':false"
:width="column.width==undefined?'auto':column.width"
align="center"
>
<template slot-scope="scope">
<div
v-if="!column.ShowState&&!column.showAndColor&&!column.show1&&!column.innerType&&!column.editInColumn&&!column.editBtns"
:class="`${[1].includes(scope.row['stateIndex'])?'stateColorOne':([2].includes(scope.row['stateIndex'])?'stateColorTwo':'')}`"
@click="onTableClick(column,scope.row,column.desc)"
>{
{
scope.row[column.desc] }}</div>
<div
v-if="column.editInColumn"
:class="`${[1].includes(scope.row['stateIndex'])?'stateColorOne':([2].includes(scope.row['stateIndex'])?'stateColorTwo':'')}`"
>
<span v-text="scope.row[column.desc]" v-if="scope.row['changeEdit']"></span>
<el-select
v-if="column.editInColumn==='select'&&!scope.row['changeEdit']"
v-model="scope.row[column.desc]"
:placeholder="column.placeholder"
filterable
clearable
>
<el-option
v-for="(item,i) in column.Options"
:key="i"
:label="item.label"
:value="item"
:value-key="true"
/>
</el-select>
<el-input
v-if="column.editInColumn==='input'&&!scope.row['changeEdit']"
v-model="scope.row[column.desc]"
:placeholder="column.placeholder"
clearable
/>
<el-date-picker
v-if="column.editInColumn==='date'&&!scope.row['changeEdit']"
v-model="scope.row[column.desc]"
:placeholder="column.placeholder"
value-format="yyyy-MM-dd"
type="date"
/>
</div>
<div v-if="column.innerType">
<el-select
v-if="column.innerType==='select'"
:class="{'select-border':column.verify&&scope.row.verify[column.desc]}"
v-model="scope.row[column.desc]"
filterable
clearable
:placeholder="column.placeholder"
@change="changeValue(scope.row,column.desc,scope.row[column.desc])"
@blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
@keyup.18.native="get"
>
<el-option
v-for="(item,i) in column.Options"
:key="i"
:label="item.label"
:value="item"
:value-key="true"
/>
</el-select>
<el-input
:class="{'input-border':column.verify&&scope.row.verify[column.desc]}"
v-if="column.innerType==='input'"
v-model="scope.row[column.desc]"
clearable
:placeholder="column.placeholder"
@input="changeValue(scope.row,column.desc,scope.row[column.desc])"
@blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
@keyup.18.native="get"
/>
<el-date-picker
:class="{'date-border':column.verify&&scope.row.verify[column.desc]}"
v-if="column.innerType==='date'"
v-model="scope.row[column.desc]"
value-format="yyyy-MM-dd"
type="date"
:placeholder="column.placeholder"
@blur="changeValue(scope.row,column.desc,scope.row[column.desc])"
@keyup.18.native="get"
/>
</div>
<div
v-if="column.show1"
:style="{'color':column.colorShow?((scope.row[column.desc] == column.statusIndex[0]||scope.row[column.desc] == null)? column.colorShow[0]:(scope.row[column.desc] == column.statusIndex[1]? column.colorShow[1] :( scope.row[column.desc] === column.statusIndex[2]?column.colorShow[2]:( scope.row[column.desc] === column.statusIndex[3]?column.colorShow[3]:( scope.row[column.desc] === column.statusIndex[4]?column.colorShow[4]:column.colorShow[5]))))):false}"
>{
{
(scope.row[column.desc] == column.statusIndex[0]||scope.row[column.desc] == null)? column.status[0]:(scope.row[column.desc] == column.statusIndex[1]? column.status[1] :( scope.row[column.desc] === column.statusIndex[2]?column.status[2]:( scope.row[column.desc] === column.statusIndex[3]?column.status[3]:( scope.row[column.desc] === column.statusIndex[4]?column.status[4]:column.status[5])))) }}</div>
<div
v-if="column.showAndColor"
:style="{color:(scope.row[column.desc] == 0||scope.row[column.desc] == null)? column.style[0]:(scope.row[column.desc] == 1? column.style[1] :( scope.row[column.desc] === 2?column.style[2]:( scope.row[column.desc] === 3?column.style[3]:( scope.row[column.desc] === 4?column.style[4]:column.style[5]))))}"
>{
{
(scope.row[column.desc] == 0||scope.row[column.desc] == null)? column.status[0]:(scope.row[column.desc] == 1? column.status[1] :( scope.row[column.desc] === 2?column.status[2]:( scope.row[column.desc] === 3?column.status[3]:( scope.row[column.desc] === 4?column.status[4]:column.status[5])))) }}</div>
<div v