优化详细列表模板

src/views/template/list/index.vue

@@ -12,7 +12,9 @@
 		<el-header>
 			<div class="left-panel">
 				<el-button type="primary" icon="el-icon-plus"></el-button>
-				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
+				<el-button v-if="selection.length>0" type="danger" plain icon="el-icon-delete"></el-button>
+				<el-button v-if="selection.length>0">变更状态</el-button>
+				<el-button v-if="selection.length>0">推送至队列</el-button>
 			</div>
 			<div class="right-panel">
 				<el-radio-group v-model="group">
@@ -21,10 +23,13 @@
 					<el-radio-button label="2">弃坑 (1)</el-radio-button>
 					<el-radio-button label="3">其他</el-radio-button>
 				</el-radio-group>
+
+				<scFilterBar :options="options" @change="change"></scFilterBar>
+
 			</div>
 		</el-header>
 		<el-main class="nopadding">
-			<scTable ref="table" :data="list" @selection-change="selectionChange" stripe>
+			<scTable ref="table" :data="list" :column="column" @selection-change="selectionChange" stripe>
 				<el-table-column type="selection" width="50"></el-table-column>
 				<el-table-column label="ID" prop="id" width="80" sortable></el-table-column>
 				<el-table-column label="状态" prop="state" width="60" :filters="[{text: '正常', value: '1'}, {text: '异常', value: '2'}]" :filter-method="filterHandler">
@@ -80,18 +85,59 @@
 </template>
 
 <script>
+	import scFilterBar from '@/components/scFilterBar';
 	import info from './info'
 
 	export default {
 		name: 'list',
 		components: {
+			scFilterBar,
 			info
 		},
 		data() {
 			return {
+				options: [
+					{
+						label: '名称',
+						value: 'name',
+						type: 'text'
+					},
+					{
+						label: '类型',
+						value: 'type',
+						type: 'select',
+						extend: {
+							multiple: true,
+							data:[
+								{
+									label: "数据",
+									value: "1"
+								},
+								{
+									label: "表单",
+									value: "2"
+								}
+							]
+						}
+					},
+					{
+						label: '创建时间',
+						value: 'date',
+						type: 'daterange',
+					}
+				],
+				column: [
+					{label: "状态值", prop: "state", width: "100"},
+					{label: "进度值", prop: "progress", width: "150"},
+				],
 				group: "0",
 				selection: [],
-				list: [
+				list: [],
+				info: false
+			}
+		},
+		mounted() {
+			this.list = [
 				{
 					id: "5001",
 					name: "scEcharts",
@@ -112,12 +158,7 @@
 					user: "Sakuya",
 					time: "2010-10-10"
 				}
-				],
-				info: false
-			}
-		},
-		mounted() {
-
+			]
 		},
 		methods: {
 			//表格选择后回调事件
@@ -131,6 +172,9 @@
 			filterHandler(value, row, column){
 				const property = column.property;
 				return row[property] === value;
+			},
+			change(data){
+				console.log(data);
 			}
 		}
 	}

src/views/template/list/info.vue

@@ -100,9 +100,7 @@
 						type: 'bar',
 						barWidth: '15px',
 						itemStyle: {
-							normal: {
-								barBorderRadius:[15, 15, 0, 0]
-							}
+							borderRadius:[15, 15, 0, 0]
 						}
 					},
 					{